React 16 release and feature introduction, Expo AR tutorial, ExtJS rise to obscurity

Front-end weekly list focuses on front-end domain content, mainly on the collection of foreign language information, to help developers understand the weekly front-end hot spots; Divided into hot news, development tutorials, engineering practice, in-depth reading, open source projects, peak life and other columns. Welcome to pay attention to [front top] wechat public number (ID: Frontshow), timely access to the front weekly list.

The news

At home and abroad, the latest developments in the front end

• React 16 official release: This week, the long-awaited React 16 release brings a slew of new features and performance improvements, as well as the official change of the open source license to MIT. The biggest change in React 16 is a complete rewrite of the core harmonic algorithm, introducing a so-called Fiber algorithm. In addition to that, React 16.0 also allows the render function to return arrays and strings directly, provides new exception handling mechanisms, introduces Portal to allow components to gracefully render child elements to external DOM nodes, optimizes server-side rendering performance, and supports custom DOM attributes. The size of the React package has also been reduced.

• GraphQL Open Source Agreement update: With the official release of React 16.0, the GraphQL standard also announced that the Open Source Agreement has been amended to Open Web Foundation Agreement (OWFa) V1.0 to ensure that developers from other companies can better collaborate to improve the Agreement. At the same time, graphQL.js and Relay are also updated to MIT open Source protocol, and Relay version 1.4.1 was released this week.

• React 16: The test library for the React component was opened by Airbnb, and the Enzyme 3.0 version was released with React 16.0. In 3.x, Enzyme also completely rewrote the internal implementation to solve some long-standing problems since its release, removing the dependency on the React internal library, making Enzyme more flexible and usable.

• GraphQL Playground release: GraphQL Playground is gradually changing the design and implementation of the API, and GraphCool has opened source GraphQL Playground to better debug and develop GraphQL. GraphQL Playground is built based on GraphiQL and provides a smoother document reading experience while preserving the document legibility of GraphiQL. In addition to this, GraphQL Playground also introduced atomized Schema overloading and GraphQL Bin-based sharing to better accommodate team development.

Development tutorial

Step by step, master the basics

• Expo AR tutorial: The new version of Expo adds support for the Augmented Reality API on iOS, allowing developers to leverage familiar libraries such as three.js for AR scenarios, as well as native interfaces such as geolocation information provided by Expo. This article introduces how to use Expo and three.js to develop a simple AR application step by step. It first introduces the use and debugging of WebGLRender, then discusses how to add basic AR scenarios, and finally gives the sample code of the complete application. Learn more about React Native here.

• React 16 server rendering features include arrays, performance, streams, and simple sequence repeat (SSR). React 15.x and previous versions of React render server. React 16 introduces new apis and backward compatibility. The React 16 server rendering strategy changes, the ability to generate more concise HTML, support for streaming, and more. Learn more about React here.

• Publish custom vue.js components on NPM: When we write a good component in vue.js, we want to share it with other developers. This article shows how to package vue.js components and publish them in NPM. This article mainly covers the following topics: how to avoid introducing other dependencies in packaging, how to use Webpack to build separate packages for browsers and Nodes, how to create browser plug-ins, important configurations in package.json, how to publish to NPM, etc. More vue.js tutorials can be found here.

• Mozilla CSS Grid Tutorial: This series of easy-to-understand CSS Grid tutorials from Mozilla shows you how to easily debug CSS Grid-based layouts using the latest version of Firefox’s debugging tool. This article first shared the basic concepts of CSS Grid terminology, then introduced the simple Grid construction and use of Firefox DevTools, then detailed the fr size, mixed size and other different size Settings, and finally gave an example of standard web layout. More CSS related tutorials are available here.

The engineering practice

Base on practice, prompt actual level

• Write readable Selenium and Node.js automated test cases: While many of the current articles on how to automate testing using Node.js and Selenium focus on setting up test environments and writing basic test cases, this article focuses on sharing elegant pieces of code and tips on best practices to improve overall test case readability and maintainability. This paper mainly discusses the disadvantages of rough use of sleep function, and gives practical techniques of using Promise to wait for elements to appear, wait for elements to be visible, wait for elements to be interactive and so on. More tutorials on Web test automation can be found here.

• Quri GraphQL practice: GraphQL follows the concept of Schema First. This article is about Quri’s two years of GraphQL practice sharing and understanding and implementation of this principle. This paper mainly discusses how to use GraphQL-FAker to build test data according to Schema and how to implement the concept of Schema First in daily business development. See more GraphQL tutorials here.

• Fantastic Mobx State Tree: This paper is the introduction of Mobx State Tree by Michel Weststrate, the author of Mobx. There have been a lot of articles discussing the advantages and disadvantages of MobX and Redux and their application scenarios. This article starts from the comparison of Redux and MobX, and firstly introduces the shortcomings of MobX. MobX is a neutral, abstract, functional-responsive data flow tool, not a complete application state management tool. MST stores global state in an immutable, structured, shared state tree while preserving the ease of operation of responsive objects. Developers can use the traditional object-oriented way, directly modify the attributes of an instance, MST will automatically create state snapshot and immutable state tree in the background; The standard MST model consists of model, views, actions and other parts, and supports custom middleware. See more MobX tutorials here.

• How TypeScript works in Lyft: Many people, when first introduced to the type system, may wonder why additional types are needed; But after a while, they can’t leave the type system, and this article is Lyft’s practice with TypeScript for static type detection. After discussing common errors without a static typing system and the productivity gains that come with the introduction of a typing system, we take a closer look at the pros and cons of TypeScript versus FlowType. Finally, we introduce the learning path of TypeScript and some of Lyft’s open source TypeScript projects. See here for more TypeScript tutorials.

Deep reading

Deep thinking, sublimation development wisdom

• ExtJS: From Rise to Fall: ExtJS is still a great platform for many developers to develop enterprise applications; The author of this article has been active in The Sencha community from 2006 to 2015, making contributions to the development of the community. With The acquisition of Sencha by IDERA, I write this article to take stock of ExtJS ‘ten years. This article begins in 2005, when the SPA trend was on the rise and The YUI framework released by Yahoo was a fad of choice. Originally ExtJS was still yui-Ext, an experimental extension to YUI. Later, with the increase of component library complexity, it officially became ExtJS (Extensible JavaScript). Around 2010, Sencha was officially established, incorporating jQTouch, Raphel JS and many open source technologies, forming a more complete community such as Sencha Touch. ExtJS 4.0 also brought a lot of innovation at this point, but its performance issues also divided the community. Finally, ExtJS 6.0 integrated ExtJS with the best parts of Sencha Touch, but with the rapid growth of React. Js, ExtJS community activity has been declining, and its future is still uncertain.

• Reuse strategies for Web applications: As product lines expand and product complexity increases, we inevitably need to integrate modules from other teams or development groups into applications, or even complete applications; This paper introduces three different reuse integration strategies: using IFrame directly into the interface, reuse the entire APP component, reuse UI component. The IFrame method is the simplest and most straightforward, and provides good application isolation. It is a good choice when the entire technology stack is different, there is no need for duplicate authentication, and there is no data interaction. While THE APP component method is used in the case of technology stack fusion, dynamic size and a small amount of interaction; The final UI component approach is the most elegant, but also requires a unified technical stack and programming specification by the team. See here for more information on Web application architecture

• Technical and non-technical guide to interview: This article is for programmers interview common algorithms and front-end domain knowledge inventory, hoping to help programmers better interview. This article discusses, in turn, how to prepare for a technical interview, algorithmic tips and best practice questions sorted by topic, common front-end interview questions and answers, interview formats common at top tech companies, behavioral questions at different companies, and great questions you can ask at the end of an interview.

• CSS font display: The future of Font rendering in the Web: Fonts are an integral part of Web development. When a Web font does not exist on the user’s device, the browser needs to start downloading the corresponding font package. Before the download is complete, the browser needs to decide how to handle the display of the relevant text, and we need to choose the appropriate way to minimize the impact of the user reading experience and improve performance. This paper introduces in detail the use of font-display property, its timeline division in the browser processing and different Settings and different loading results under the browser processing strategy. More CSS related tutorials are available here.

The open source project

Willing to share, push forward the front-end development

• Billboard.js: Billboard.js is a lightweight, reusable data visualization component library based on d3. js V4; Billboard.js provides common line charts, pie charts, dot charts, and more.

• Dexie.js: Dexie.js is a wrapper around the standard IndexedDB database in the browser, providing a server-side database-style interface. At the same time, robust exception processing is carried out to ensure the scalability and availability, and change tracking and interval query are provided to simplify keyword search, logical operation and other operations.

• Cherow: Cherow is a fast ECMAScript syntax parser written based on standard ECMAScript syntax; It follows the standard ECMAScript 2018 language specification and can be safely used in production. Cherow supports the Stage 3 proposal, supports JSX, skips working comment nodes by default and optionally tracks syntax node locations.

• Wretch: Wretch is a lightweight wrapper around FETCH that provides an intuitive and transparent syntax. Wretch is designed to compensate for the complexity of the fetch underlying interface. It provides the encapsulation of common return value response functions such as notFound, Unauthorized, Error, and Catch.

The peak of life

• The engineer culture of Apple in those crazy years: how many trials and sufferings did it take to create an epoch-making product? How many people did it take to work behind the scenes? What happens is unimaginable to the end user. Andy Hertzfeld, author of Revolution in Silicon Valley, took the story of the development of the original Mac to Folklore.org and later published it as a book, hoping that the seminal technological revolution of the early 1980s would become a legend. In his introduction, the author writes: “I believe that we have yet to realize our vision for the Macintosh. Perhaps the true legend has yet to come.”

At the top of the front end

InfoQ is a vertical community focused on front-end technology. To join the InfoQ learning group, please follow the “Front-end top” public account and reply to “Add group”. Please email your submission to [email protected], marked “Top of the Front”.