Frontend+ Weekly No.5: React Context API & Patterns Evolution, Web Optimize with Webpack, Page Generation by AI

The best articles, links and news related to Frontend Development, and more, delivered once a week. All reference in this issue are gathered from Medium, Hacker News, Reddit,Twitter, MyBridge, etc.

More Issues can be found in Frontend+ Weekly Repository.

News

• Chrome will mark all HTTP sites as “not secure: Google Chrome now announced that starting in Chrome 68 (to be releaded in July 2018) the browser will mark non-secure sites (HTTP) as “not secure”, marking the end of non-HTTPS websites. Developers can use latest Node CLI version of Lighthouse, an automated tool for improving web pages, to find which resources a site loads using HTTP, and which of those are ready to be upgraded to HTTPS simply by changing the subresource reference to the HTTPS version.

• Rollup now has code-splitting: As of version 0.55, Rollup, the JavaScript module bundler, finally has code-splitting, the most popular feature request for a long time. Rollup has long been the tool of choice for library authors — it powers React, Vue, D3, Moment, Three.js, Ember, Angular, Babylon, Jest, Bootstrap, Leaflet, Prettier, and thousands of other tools — but code-splitting means Rollup can now become a great choice for applications of all sizes.

• Welcoming Progressive Web Apps to Microsoft Edge and Windows 10: Edge 17 will come with Service Workers and Push Notifications, and the Microsoft Store will start listing Progressive Web Apps by manual submission which is a big step ahead for making web apps as usable as native apps. In this post, we’ll give a quick introduction to Progressive Web Apps – what they are, the problems they solve, and how we’ll be enabling them across Windows 10.

Tutorial

• What’s new in React 16.3: React 16.3-alpha just hit npmjs and can be downloaded and added to your project, this post will make some observation about new features in this version. New context API, The new API is accessible as React.createContext() and creates two components for us; New life-cycle methods, componentWillMount, componentWillUpdate, componentWillReceiveProps get removed and getDerivedStateFromProps is introduced; StrictMode to make sure your code is following the best practices, New version of React Developer Tools. More reference about this can be found React Reference.

• Service workers: the little heroes behind Progressive Web Apps: Service workers are at the core of Progressive Web Apps. They allow caching of resources and push notifications, which are two of the main distinguishing features that have set native apps apart up to this point. This post will cover Background Processing, Offline Support, Precache assets during installation, Caching network requests, Installation and Basic Usage, etc. More reference about this can be found PWA Reference.

• React’s ⚛️ new Context API: This post will introduce the new Conext API in React, it consists of thress main parts: React.createContext which is passed the initial value, returns an object with a Provider and a Consumer. The Provider component is used higher in the tree and accepts a prop called value (which can be anything). The Consumer component is used anywhere below the provider in the tree and accepts a prop called “children” which must be a function that accepts the value and must return a react element (JSX). More reference about this can be found React Reference.

Engineering Practices

• Five Common Problems in GraphQL Apps (And How to Fix Them): In this article, we will learn to unlock the power of GraphQL without suffering its drawbacks. The author talks about problems such as: Schema duplication, Server/client data mismatch, Superfluous database calls, Poor performance and Boilerplate overdose. For each issue, I’ll describe the problem, and then explain how I’m addressing it inside Vulcan, a React/GraphQL open-source framework I’ve been working on over the past year. More reference about this can be found in GraphQL Reference.

• Redux modules and code-splitting: Twitter Lite uses Redux for state management and relies on code-splitting. However, Redux’s default API is not designed for applications that are incrementally-loaded during a user session. This post describes how I added support for incrementally loading the Redux modules in Twitter Lite. It’s relatively straight-forward and proven in production over several years. More reference about this can be found in Redux Reference.

• Web Performance Optimization with Webpack by Addy Osmani: Modern web applications often use a bundling tool to create a production “bundle” of files (scripts, stylesheets, etc.) that is optimized, minified and can be downloaded in less time by your users. In Web Performance Optimization with webpack, we will walk through how to effectively optimize site resources using webpack. This can help users load and interact with your sites more quickly. Webpack is one of the most popular bundling tools in use today. Taking advantage of its features for optimizing modern code, code-splitting scripts into critical and non-critical pieces and stripping out unused code (to name but a few optimizations) can ensure your app has a minimal network and processing cost. More reference about this can be found in Webpack Reference.

Under the hood

• Evolving Patterns in React: Let’s take a closer look at some of the patterns that are emerging in the React ecosystem. These patterns improve readability, code clarity, and push your code towards composition and reusability. This post will cover Conditional Render, Passing Down Props, Destructuring Props, Provider Pattern, High Order Components, Render Props, etc. More reference about this can be found React Reference.

• Front End Interview Handbook: Unlike typical software engineer job interviews, front-end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas. While there are some existing resources to help front end developers in preparing for interviews, they aren’t as abundant as materials for a software engineer interview. Among the existing resources, probably the most helpful question bank would be Front-end Developer Interview Questions. And this post is almost complete answers to “Front-end Job Interview Questions”. More reference about this can be found Awesome Web Reference.

• How you can train an AI to convert your design mockups into HTML and CSS: Within three years, deep learning will change front-end development. It will increase prototyping speed and lower the barrier for building software. The field took off last year when Tony Beltramelli introduced the pix2code paper and Airbnb launched sketch2code. Currently, the largest barrier to automating front-end development is computing power. However, we can use current deep learning algorithms, along with synthesized training data, to start exploring artificial front-end automation right now. In this post, we’ll teach a neural network how to code a basic a HTML and CSS website based on a picture of a design mockup. More reference about this can be found Awesome Web Reference.

OpenSource

• Automerge: Automerge is a library of data structures for building collaborative applications in JavaScript, or a JSON-like data structure that can be modified concurrently by different users, and merged again automatically. A common approach to building JavaScript apps involves keeping the state of your application in model objects, such as a JSON document, Automerge is used in a similar way, but the big difference is that it supports automatic syncing and merging.

• winamp2-js: This is a reimplementation of Winamp 2.9 in HTML5 and JavaScript. It includes these features: Decodes the actual skin file in your browser so you can load your favorite Winamp 2 skins, Load local audio or skin files via drag-and-drop, eject button, or “options” button (upper left-hand corner), etc.

• Rekit #JavaScript#: Rekit is a toolkit for building scalable web applications with React, Redux and React-router. It’s an all-in-one solution for creating modern React apps. It helps you focus on business logic rather than dealing with massive libraries, patterns, configurations etc. Rekit creates apps using an opinionated folder and code structure. It’s designed to be scalable, testable and maintainable by using feature oriented architecture, one action per file pattern. This ensures application logic is well grouped and decoupled.

• WebAssemblyStudio: Onine studio to learn, teach, work and play WebAssembly, it supports C++ and Rust. User can build and run wasm projects in the browser, also can run a local copy, which need to install node.js and webpack on your computer.

Work Life

• How N26 built a modern banking software with JavaScript & Microservices.: Patrick Kua, the CTO of N26, a successful banking startup from Germany. Patrick is a microservices expert who spent 13 years at ThoughtWorks, and then decided to lead the tech team for a modern banking company which already serves more than 500.000 users. This post will with the intention of understanding how Patrick’s team choose the languages and frameworks they use, how they handle testing, DevOps & continuous integration and how they develop Microservices.