Managing state in modern React web applications

Overview This post details a presentation I gave at my local JavaScript North-West Meetup on 16th October 2018 at Dept Digital Agency in Manchester, UK. Below are the accompanying notes I wrote that acted as a rough speaking guide, and may or may not have been spoken during the event itself. Assumptions Throughout this talk I will assume that you have at least a working to intermediate knowledge of JavaScript and React concepts, and that you have at least worked with React in some capacity in the past. This is, after all, a presentation on React. This is not a course for beginners, or introductory level. This presentation assumes that you are using at least version 16.3 of React JS, this is because the refreshed version of Context was not released until this version. Please ask questions as we go along as others may find the answers helpful. Should your question require a long time to answer, I may defer the answer until after the presentation is over. (Come speak to me afterwards). What is state? At a basic level, state is what allows you to create components that are dynamic and interactive. State enables users to interact with your application. Without state, your…

A bare bones React boilerplate, featuring Webpack 4, React, Redux, Jest, and Babel 7

I love template projects. In fact, I use them all the time. Template projects, seed projects, starter projects, whatever you want to call them, they are fantastic. Starter templates help you get up and running very quickly and can be very useful and powerful when learning something new. Many template projects I see around the web are bloated with every feature under the sun. Having a long list of features can be amazing, however, some projects have grown significantly… which can increase complexity, the learning curve, bundle size, and reduce performance. Under no circumstances am I suggesting that using a popular open source larger starter project is a bad idea. However, when working on projects I like to start with the minimum feature set required to get the project off the ground, and then add features on demand. I created a repository on GitHub to cater for my exact needs, webpack 4 scratch . The post provides an overview of the out-of-the-box functionality and reasoning behind decisions made. Overview Before we get into the details, lets answer the most important question first. What functionality does this starter provide? React, Redux and React Router pre-configured out-of…

A high level look at Angular 2

Developed by Google, Angular 2 is the newest version of the popular Single Page Application (SPA) framework. Angular 2 is a step in a new direction compared to previous versions, but has keep all the best characteristics and “lessons learnt” to deliver a fast, fully featured and rich ecosystem. About Angular 2 Angular 2 impacts your whole application, or at the least, a section of it, rather than specific pages. Angular 2 is best suited to new (“greenfield”) development, as it can be relatively tricky to migrate legacy code (Angular 1.x code) to the new version. Angular 2 has new concepts, syntax, methodologies, and opinions, but is comparable to as previous versions in the way it works. If you have been following Angular development since “the early days” of beta 1, then its been a very rocky road for you. Even now (this post was written around the release of RC5), the API is still evolving and new features are being added. Whilst this experience has been hard for early adopters, I believe the end result will be a fantastic, easy to use, and performant framework with a lower barrier to entry for all. Overview The purpose of this post is to discuss the core concepts of Angular…

Angular 2 server side paging using ng2-pagination

Angular 2 is not quite out of beta yet (Beta 12 at the time of writing) but I’m in the full flow of developing with it for production use. A common feature, for good or bad, is to have lists/tables of data that the user can navigate through page by page, or even filter, to help find something useful. Angular 2 doesn’t come with any out of the box functionality to support this, so we have to implement it ourselves. And of course what the means today is to use a third party package! To make this happen, we will utilise n2-pagination , a great plugin, and Web API. I’ve chosen Web API because that is what I’m using in my production app, but you could easily use ExpressJS or (insert your favourite RESTful framework here). Checklist Here is a checklist of what we will do to make this work; Create a new Web API project (you could very easily use an existing project) Enable CORS, as we will use using a seperate development server for the Angular 2 project Download the Angular 2 quick start, ng2-pagination and connect the dots Expose some sample data for testing I will try to stick with this order. Web API (for the back end) Open up Visual Studio ( free version here ) and create a new Web…

Create a RESTful API with authentication using Web API and Jwt

Web API is a feature of the ASP .NET framework that dramatically simplifies building RESTful (REST like) HTTP services that are cross platform and device and browser agnostic. With Web API, you can create endpoints that can be accessed using a combination of descriptive URLs and HTTP verbs. Those endpoints can serve data back to the caller as either JSON or XML that is standards compliant. With JSON Web Tokens (Jwt), which are typically stateless, you can add an authentication and authorization layer enabling you to restrict access to some or all of your API. The purpose of this tutorial is to develop the beginnings of a Book Store API, using Microsoft Web API with (C#), which authenticates and authorizes each requests, exposes OAuth2 endpoints, and returns data about books and reviews for consumption by the caller. The caller in this case will be Postman , a useful utility for querying API’s. In a follow up to this post we will write a front end to interact with the API directly. Set up Open Visual Studio (I will be using Visual Studio 2015 Community edition , you can use whatever version you like) and create a new Empty project, ensuring you select the Web API option…