Frontend+ Weekly No.3: Try Webpack 4 Beta, React Windowing and setState, Building blocks of Web Workers

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

• iOS 11.3 and macOS 10.13.4 include Service Workers: In this week, Safari Technology Preview 48 is available, it changes how Password AutoFill works, enable the Storage Access API, etc. More important, iOS 11.3 and macOS 10.13.4 include Service Workers, a powerful specification that allows background scripts to power offline web applications. iOS 11.3 also consults Web App Manifest when add web apps to the home screen. More reference about PWA can be found here.

• Parcel v1.5.0 released: Parcel has over 17,000 stars on Github, over half a million downloads on npm, and over 60 contributors who have submitted over 200 pull requests! Parcel v1.5.0 is a HUGE release. The highlights include: JavaScript Source Map support, WebAssembly support, Rust → WebAssembly support, Config files invalidate cache, .env file support, Even faster for smaller projects.

• Expo SDK v25.0.0 released: Expo SDK v25.0.0 is based off the recently released React Native 0.52. In this release, it supports for fonts, videos, and audio assets in standalone apps; make release channels get more powerful; out-of-the-box support for AWS Cognito; improve APIs and additions.

• Bootstrap 4: It’s literally taken us years to do it, but Bootstrap 4 has finally arrived! There are no breaking changes since our last beta, but we have made some key improvements and resolved some tricky bugs: print styles and utility classes have been updated, additive border utilities have been added, our $spacers and $sizes Sass maps have been updated, added documentation to our Theming docs, added responsive .order-0 and .order-last classes for more control over the flexbox grid.

Tutorial

• webpack 4 beta — try it today!: In this week, webpack 4.0.0-beta.0 is released. This post states what’s new in webpack 4: Performance will be significantly enhanced in multiple scenarios, Better Defaults, support for sideEffects: false in package.json, JSON Support & Tree Shaking, Upgrade to UglifyJS2, Module Type’s Introduced + .mjs support, WebAssembly Support, Goodbye CommonsChunkPlugin, etc. More reference about Webpack can be found here.

• How to use JavaScript Proxies for Fun and Profit: There’s a very recent new feature of the JavaScript language that is still not being widely used: JavaScript proxies. With JavaScript proxies you can wrap an existing object and intercept any access to its attributes or methods. In this article, the author uses proxy for developing an sdk for api with 20 lines of code, querying data structures with more readable methods, monitoring async functions. More reference about JavaScript can be found here.

• Interesting ECMAScript 2017 proposals that weren’t adopted: Because polyfills and transpilers have become popular in recent years, some early-stage proposals have gained significant adoption before they’ve even been finalized. In this article, we will go through some interesting ECMAScript 2017 proposals that weren’t adopted. Firstly, the author introduce five stages of the ECMAScript proposal process. Next, he talks about Asynchronous Iteration, Class Improvements, Class Decorators, Import Function, Observables, Do Expression, Optional Chaining, etc. More reference about JavaScript can be found here.

Engineering Practices

• Creating more efficient React views with windowing: In this presentation, the bvaughn talks something abot performance, search, and app architecture in React development. He focuses on what slows React applications down, how can we fix and shares some lessons-learned. It is worth mentioning that he discusses how does windowing work and how to only create elements the user can see. More reference for learning React can be found here.

• SPA, or not SPA, that is the question!: In this article I will try to share my experience by listing my 10 reasons why you shouldn’t do a SPA website: Speed and Performance, High Development Costs, Fragility, Hard Long term Maintainability, Poor Security, Reinventing the wheel, Social media and meta attributes, Poor Accessibility, Waste of memory and energy. More reference about web architecture can be found here.

• Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver: In this article, we are going to go out of the scroll darkness and talk about the modern way of lazy-loading resources. Not just lazy-loading images, but loading any asset for that matter. More so, the technique we are going to talk about today is capable of much more than just lazy-loading assets: We will be able to provide any type of deferred functionality based on the elements’ visibility to users. More Reference About Web Optimization can be found Here.

Under the hood

• why is setState asynchronous?: mweststrate, the author of MobX, open this issue to wonder why setState is asynchronous. Reasons we often hear are that: async setState is required for async rendering, async setState is needed to know which state was rendered, etc. Gaearon clarify this confusion with different thought: guaranteeing internal consistency, enabling concurrent updates, etc. More reference for learning React can be found here.

• How JavaScript works: The building blocks of Web Workers + 5 cases when you should use them: This is post # 7 of the series dedicated to exploring JavaScript and its building components, we’ll offer an overview, discuss the different types of workers, how their building components come to play together, and what advantages and limitations they offer in different scenarios. Asynchronous functions solve only a small part of the single-thread limitations of the JavaScript language, on the other hand, Web Workers are lightweight, in-browser threads that can be used to execute JavaScript code without blocking the event loop. More reference about Web Worker can be found Here.

• Firefox 58: The Quantum Era Continues: 2017 was a big year for Mozilla, culminating in the release of Firefox Quantum, a massive multi-year retooling of the browser focused on speed, and laying the groundwork for the years to come. Here are a few improvements that have landed in the latest Firefox, Off-Main-Thread Painting, Keeping Firefox Focused with Background Tab Throttling, WebAssembly Streaming Compiler, CSS Font Display, New Promise feature to reduce redundant code. These are also some extension enhancement in Firefox 59.

OpenSource

• Rejoiner: Rejoiner is opensourced by Google, to generate a unified GraphQL schema from gRPC microservices and other Protobuf sources. It allows the GraphQL schema to be flexibly defined and composed as shared components, populates request Proto based on GraphQL query parameters, supplies a DSL to modify the generated schema, joins data sources by annotating methods that fetch data.

• CSS Gridish: CSS Gridish takes design specs of your product’s grid and builds out several resources for your team to use: Sketch file with artboards and grid/layout settings for designers, CSS/SCSS code using CSS Grid with a CSS Flexbox fallback for developers, Google Chrome extension for anyone to check a webpage’s alignment. This tool is not a grid system with a grid already designed for you. Instead, CSS Gridish builds all of the resources for the grid your team designed. More information can be found in this article.

• Greenlet: Greenlet can move an async function into its own thread, it can be treated as a simplified single-function version of workerize. The function you pass should be pure, since they get executed in an isolated scope.

• Purgecss: When you are building a website, chances are that you are using a css framework like Bootstrap, Materializecss, Foundation, etc… But you will only use a small set of the framework and a lot of unused css styles will be included. This is where Purgecss comes into play. Purgecss analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.