2018.12.03 - React 16.x Roadmap

Title: 2018.12.03 – React 16.x Roadmap

In‑Depth Reading

React 16.x Roadmap https://reactjs.org/blog/2018/11/27/react-16-roadmap.html
We plan to split the rollout of new React features into the following milestones:

• React 16.6 with Suspense for Code Splitting (already shipped)
• A minor 16.x release with React Hooks (~Q1 2019)
• A minor 16.x release with Concurrent Mode (~Q2 2019)
• A minor 16.x release with Suspense for Data Fetching (~mid 2019)

Additional reads: Under the hood of React’s hooks system, React Hooks Heading Towards an Official Release, State of React State Management in 2019.

Backdoor in event‑stream library dependency https://github.com/dominictarr/event-stream/issues/116
A malicious developer gained access to a popular npm module and added code that could steal cryptocurrency information.

Supplementary links: Details about the event‑stream incident, event‑stream vulnerability explained, event‑stream creator’s statement.

Project Guidelines https://github.com/elsewhencode/project-guidelines
While starting a new project feels like rolling on a green field, maintaining it can become a nightmarish ordeal for someone else. Below is a list of guidelines we’ve written and gathered that (we think) work well for most JavaScript projects at Elsewhen.

Additional resources: The Front‑End Checklist, A free guide to elements.

An Extensive Guide to Progressive Web Applications https://www.smashingmagazine.com/2018/11/guide-pwa-progressive-web-applications/
In this article we examine the pain points of users browsing old non‑PWA sites and the promise of PWAs to make the web great again. You’ll learn the key technologies behind cool PWAs, such as service workers, web push notifications, and IndexedDB.

Ionic Appflow: DevOps for Everyone https://blog.ionicframework.com/ionic-appflow-devops-for-everyone/
Put simply, Appflow is a DevOps solution for businesses building apps with Ionic. It helps teams increase agility, app quality, and time‑to‑market by automating key phases of the development lifecycle.

Supplement: Announcing Ionic Studio: A Powerful New Way to Build Apps.

W3C Web Chinese Interest Group Kick‑off – Summary Report https://www.w3.org/2018/11/17-chinese-web-meeting-summary.html
The meeting covered WebXR, Web Packaging, Media, next‑generation mobile Web apps, WebGPU, Web Neural Network API, WebAssembly, Web performance, WebRTC, and Web Payments. Participants discussed the current status of these standards, existing implementations in China, feasibility and challenges of adoption, and whether there is domestic demand that should be brought to the W3C for further discussion and work.

Taro Deep Development Practice https://aotu.io/notes/2018/11/30/taro_practice/index.html
Taro is a multi‑platform development solution that follows React syntax. It currently supports WeChat Mini‑Programs, H5, React Native, Alipay Mini‑Programs, and Baidu Mini‑Programs, and continues to add more platforms and features. This article shares deep‑development practices for Taro, combining our experience from real projects. It first explains why Taro adopts React syntax, then discusses code organization, state management, performance optimization, and cross‑platform compatibility.

Discussion: Function Components and Hooks http://taobaofed.org/blog/2018/11/27/hooks-and-function-component/
For complex applications, using Function Components + Hooks is highly recommended—it’s the path to a better future.

Supplement: As Natural as Breathing: React Hooks + RxJS.

Hacking CSS writing‑mode http://www.tipue.com/blog/css-writing-mode/
The writing-mode CSS property sets horizontal and vertical text direction. While intended for multilingual use, it can be exploited for creative design effects.

What, exactly, is the DOM? https://bitsofco.de/what-exactly-is-the-dom/
The Document Object Model (the “DOM”) is an interface to web pages. It is essentially an API that lets programs read and manipulate a page’s content, structure, and styles. Let’s break this down.

Supplement: A look at CSS Resets in 2018.

The Art of Mathematics: A Mandala Maker Tutorial https://24ways.org/2018/the-art-of-mathematics/
In front‑end development, a lot of attention is given to tools that boost productivity. But what if you’re new to web development? When you’re just starting, the sheer amount of material can be overwhelming, especially without a solid CS background. The good news is that after learning a little JavaScript, you can already create some impressive things.

The Subtle Art of Code Golf in JavaScript https://www.lesscake.com/code-golf-javascript
The goal of “code golf” is to shrink a program’s size as much as possible. It’s a fascinating practice I knew little about, so I challenged myself to code‑golf a simple JavaScript program. In this article I share the program I wrote and the five main stages I went through to make it much shorter, providing an overview of the main techniques used in JavaScript code golf.

HTTP/3 Explained https://daniel.haxx.se/blog/2018/11/26/http3-explained/
The article explains what HTTP/3 and its underlying transport protocol QUIC are, why they exist, what features they provide, and how they work. It is written to be readable for anyone with at least a basic understanding of networking.

5 Lessons Learned from Writing Over 300,000 Lines of Infrastructure Code https://blog.gruntwork.io/5-lessons-learned-from-writing-over-300-000-lines-of-infrastructure-code-36ba7fadeac1
A concise masterclass on how to write infrastructure code.

Reliable Webhooks Using Serverless Architecture https://medium.com/square-corner-blog/reliable-webhooks-using-serverless-architecture-e009a2096732
How we made our webhooks more reliable by using Amazon SQS and Lambda.

How to Balance Full‑Time Work with Creative Projects https://thecreativeindependent.com/guides/how-to-balance-full-time-work-with-creative-projects/
A guide by Jeffrey Silverstein (illustrated by Sunny Eckerle) on finding the right day job, protecting your time, and building creative habits.

Is There a Better Way to Document Complex Software Architectures? https://news.ycombinator.com/item?id=18508284
So much effort has gone into better languages, compilers, and IDEs for developers that I’m confused—where is the modern “IDE” for the software architect?

Go 2, Here We Come! https://blog.golang.org/go2-here-we-come
A major difference between Go 1 and Go 2 is who influences the design and how decisions are made. Go 1 was a small… (content truncated)

---

Originally written by Ping Xia (平侠) and published in Chinese on Web技术周刊 (Web Tech Weekly). Translated and adapted for DriftSeas with permission.