Frontend+ Weekly No.4：AngularJS and Long Term Support, Something about Web Security, Clean Code in React

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

• Announcing TypeScript 2.7: In this week, TypeScript 2.7 is released, this post puts together a quick list for a bird’s eye view of this release: Stricter class property checks, Definite assignment assertions, Easier ECMAScript module interoperability, unique symbol types and const-named properties, Cleaner output in –watch mode, Prettier –pretty output, Numeric Separators, Fixed Length Tuples, in operator narrowing and accurate instanceof and Smarter object literal inference.

• style-components 3.1.0 is available: This version introduces a new CSS injection mechanism, which means faster client-side rendering in production and streaming server-side rendering support enables a faster time-to-first-byte. styled-components v3.1.0 now uses insertRule in production by default, a new and widely unknown DOM API, initial mount time of the benchmark app was reduced by ~10x, and re-render time was reduced by ~20x!

• Stable AngularJS and Long Term Support: AngularJS is an extremely stable framework for building web applications, and has been used by millions of developers across the web. AngularJS is planning one more significant release, version 1.7, and on July 1, 2018 it will enter a 3 year Long Term Support period. After the release of 1.7.0 the team does not intend to merge any feature or fix that will require even a minor breaking change.

• V8 release v6.5: Every six weeks, we create a new branch of V8 as part of our release process, this post provides a preview of some of the highlights in anticipation of the release. This release comes with a streaming compilation for WebAssembly code, The WebAssembly API provides a special function to support streaming compilation in combination with the fetch() API. In addition, they continued to work on widening the fast-path of JavaScript builtins in general, adding a mechanism to detect and prevent a ruinous situation called a “deoptimization loop.”

Tutorial

• An introduction to Progressive Web Apps: Progressive Web Apps (PWA) are the latest trend in mobile application development using web technologies. A Progressive Web App is a website which is developed with certain technologies that make the mobile experience much more pleasant than a normal mobile-optimized website. In this post, the author talks about Progressive Web Apps alternatives, Progressive Web Apps features, etc. More reference about this can be found Awesome PWA Reference.

• Routing and Route Protection in Server-Rendered Vue Apps Using Nuxt.js: The concept and implementation details of Server-Side Rendering (SSR) are challenging for beginners as well as experienced developers. The challenges get more daunting when you have to do things like data fetching, routing and protecting authenticated routes. This article will walk you through how to overcome these challenges with Nuxt.js. More reference about this can be found in Awesome Vue Reference.

• State Management with MobX State Tree: With MobX State Tree, we have another first class contender that should be thrown into the candidates for managing state. While it is not completely its own separate state management solution (it is very similar to MobX), it is different enough to not categorize it as just “MobX”. This post introduce how to use MobX State Tree, and compare the codebase between MobX. More reference about this can be found in Awesome MobX Reference.

Engineering Practices

• Modernizing Node.js with idiomatic JavaScript: Performance in JavaScript is a huge area, it is faster than ever, but there is still one question that remains unanswered: How can we decide which JavaScript to make fast? In the past, performance advice was often presented as anti-patterns, for example “Don’t use for-each” or “Don’t use try-catch”. Fast-forward to 2018 — Node.js can now also be powered by the ChakraCore JavaScript engine and V8 has a new optimizing compiler Turbofan, so JavaScript developers should focus on writing idiomatic, readable and maintainable code and not focus on the compilers underneath. More reference about this can be found in Awesome Node.js Reference.

• 12 best practices for user account, authorization and password management: Account management, authorization and password management can be tricky. For many developers, account management is a dark corner that doesn’t get enough attention. For product managers and customers, the resulting experience often falls short of expectations. Google Cloud Platform (GCP) brings several tools to help you make good decisions around the creation, secure handling and authentication of user accounts. This post will lay out the best practices to ensure you have a safe, scalable, usable account authentication system. More reference about this can be found in Awesome WebSecurity Reference.

• How Big Is That Box? Understanding Sizing In CSS Layout: A key feature of Flexbox and Grid Layout is that they can deal with distributing available space between, around and inside grid and flex items. In this article, I’m going to share with you some interesting things about sizing boxes in CSS. I’ve picked out a few things from the specifications that I believe are vital in terms of understanding exactly how big that box is. Take some time to read through, and I think you’ll find sizing in Grid a lot less mysterious! More reference about this can be found in Awesome CSS Reference.

Under the hood

• The Path to Becoming a Software Architect: Have you ever wondered what career opportunities a developer has? There are several career paths a developer might take, and this series talks over how to become a software architect. There are several posts in this series: The Path to Becoming a Software Architect, Stakeholders in Software Architecture, Types of Software Architects, Quality attributes in Software Architecture, etc. More reference about this can be found in Awesome WebSecurity Reference.

• How to stop me harvesting credit card numbers and passwords from your site: The author wrote a post to describe how I distributed malicious code that gathers sensitive information. In this article, he puts forward some practical advice: no need to try and avoid third-party code, capture sensitive information in a separate HTML file, display this file in an iframe, serve the file from a static file server on a different domain. More reference about this can be found in Awesome WebSecurity Reference.

• Clean Code in React: Developer from Bara refactor his codebase, following the Clean Code, so as to make them better. At the end of article, author shares some thoughts: Break down the component: only one level of abstraction per component, Break down the function: only one level of abstraction per function, Use more descriptive names, etc. More reference for React can be found Awesome React Reference

OpenSource

• Kap: Kap is an open-source screen recorder built with web technology, only can be used in macOS at now.

• Polka: Polka is an extremely minimal, highly performant Express.js alternative. Yes, you’re right, Express is already super fast & not that big 🤔 — but Polka shows that there was (somehow) room for improvement! Essentially, Polka is just a native HTTP server with added support for routing, middleware, and sub-applications. That’s it!

• Callbag: Callbag is a standard for JS callbacks that enables lightweight observables and iterables, and callbags-basic is a tiny library based on the Callbag standard. We can also read the article by André Staltz to learn more.

• Unstated: Unstated is another state management framework, which designed to build on top of the patterns already set out by React components and context. It has three pieces, Container, a very simple class which is meant to look just like React.Component but with only the state-related bits; Subscribe, allows us to pass our container classes and receive instances of them in the tree and Provider, something to store all of our instances internally.