Author: King Invite moon bear editor: Xu Chuan

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

  • Microsoft Edge for iOS and Android To ensure that Windows users have a consistent experience across all platforms, Microsoft this week launched the Microsoft Edge browser for iOS and Android and the Microsoft Launcher for Android. However, the Edge browser on all platforms still uses the default rendering engine of the operating system, namely Webkit on iOS and Chrome on Android, so developers don’t have to worry about adapting to Microsoft Edge on mobile.

  • Official Release of Firefox 56: This week’s release of Firefox 56 comes with a new generation of Quantum engine that brings significant performance improvements, a new interface, updated developer tools, and more. In addition, Firefox 56 also provides a convenient screenshot function that allows users to edit and quickly save web screenshots to the cloud. < Link rel=”preload”> was also introduced to provide resource preloading and to allow users to launch an interface less browser with the -headless command.

  • Mocha 4.0.0 release: Mocha 4.0.0 will be released this week. It will no longer support Node.js pre-v4.0.0 or earlier, NPM v2.15.11 or earlier, and Bower is planned. In addition to versioning compatibility, Mocha no longer forces exit after testing and has optimized the output display.

  • Release of iView version 2.4: iView is a library of interface components and plug-ins built on vue.js, which contains a series of solutions for middle layer and back-end business logic developed by TalkingData; IView provides basic components, form components, view components, navigation components, charts, and many other types of components.

Development tutorial

Step by step, master the basics

  • The React stack has changed dramatically since 2013 when React was opened to the public, and many of the articles searched are now outdated. This article takes stock of the stack of technologies needed for React development. The first is the development environment, with create-React-app leading the way with 65%. On the type system, 42% of developers choose PropTypes and 34% choose TypeScript. For state management, 48% use Redux and 11% use MobX. More and more developers are also choosing to use CSS or SASS for styling, and HoC or Render Props for reusing logic. Learn more about React here.

  • The comparison of the responsive implementation in VUe.js 2 and vue.js 3: The core team of Vue.js has been discussing the core responsive implementation in Vue.js 3. The internal implementation may change under the condition that the API is consistent. This paper is to compare the two responsive implementation schemes. The responsivity of Vue.js 2.0 mainly relies on Object.defineProperty, which has good browser compatibility, but it cannot directly listen for array subscript changes and dynamically added attributes. In vue.js 3, reactive listening is planned to be implemented using ES6 Proxy, which simplifies source code, is easy to learn, and delivers better performance. More information about vue.js can be found here.

  • This article is a brief introduction to the PRINCIPLE of THE HTTPS protocol. As more and more sites adopt HTTPS, it is necessary for us to understand the related knowledge of HTTPS. This paper firstly introduces the mechanism and principle of HTTPS, then introduces the Diffie-Hellman algorithm, and then introduces the contents of electronic certificate, Asymmetric Key Encryption, electronic signature, certificate verification and so on. See here for more information on HTTPS.

  • CSS Grid skills and stumbling blocks: CSS Grid has brought us a new layout, but in the actual use of the process there are also a lot of problems, this article is to these skills and stumbling blocks inventory. This paper first analyzes the advantages of CSS Grid over Flexbox. Then it discusses the applicable scenarios of CSS Grid and Flexbox, the self-adaptive size of CSS Grid, how to use CSS Grid to realize waterfall flow, how to add background and margin color, how to nest layout, how to debug and so on. For more information about CSS, see here.

The engineering practice

Base on practice, prompt actual level

  • React, inline functions and performanceMany articles on React performance optimizations talk about inline functions, which are one of the common culprits of slow performance. However, this paper is to break the casserole, demonstrating that inline functions do not necessarily slow down the performance, excessive performance optimization will harm the application performance. Starting from his own practice, the author first discusses two reasons why inline functions may slow down: memory allocation and garbage collection,shouldComponentUpdate; ShouldComponentUpdate or PureComponent should not work in all cases and should vary from time to time. Reacthere.

  • Angular performance Tip: Oasis Digital has been using Angular to build large software projects, and engineers have learned many lessons from years of practice, especially when building performance-sensitive applications. Here are the three most important performance-related tips they shared. This paper first discusses the definition and index composition of runtime performance, and then analyzes three optimization strategies: how to improve the response speed of events, how to minimize the range of change detection, and how to minimize DOM operations. See here for more information about Angular.

  • Responsive picture foundation: picture is an important component of modern websites, which can enhance the expressive force and appeal of web pages; However, users often don’t want to wait too long for images to load, so choosing the right image size can greatly improve the user experience. In this paper, the author explains the basic concept of responsive images and common methods to set up responsive images. This article first discusses how to choose the appropriate way to set up responsive images, how to choose the appropriate segmentation points, pixel versus percentage, the role of the size attribute in the browser, using CSS to make images more smooth and so on. More information on performance tuning can be found here.

Deep reading

Deep thinking, sublimation development wisdom

  • This article is not a tutorial, but a timeline of the creation and development of vue.js, the current state of the vue.js technology community, and plans for the future version 3.0. This article first introduces the original intention and design concept of vue.js, and then introduces the various resources of vue.js: learning materials, weekly newspapers, forums, communities, etc., as well as Weex, the native extension related to vue.js. Finally, this article discusses improvements to the test suite, TypeScript support, and ESLint optimizations in version 2.0, as well as core responsiveness and support for older browsers in version 3.0. More information about vue.js can be found here.

  • Optimization of ES2015 Proxy in V8 engine: Proxy is an important part of ES2015 and has been gradually applied to many projects or libraries, such as JSDOM, Comlink RPC, etc. In recent days, the V8 team has been working on improving Proxy performance in V8. This article shares the performance improvement paradigm of Proxy in V8 and helps developers understand how Proxy works. This paper first analyzes the implementation principle and working mechanism of the old version of Proxy, and then discusses the optimized solution and performance comparison in the real environment. More information on V8 is available here.

  • Image optimization must know must meet: by 2017, the image is still the largest user of network bandwidth, referring to HTTP Archive statistics, all captured web data has more than 60% of the traffic is JPEG, PNG and GIF image resources; Addy Osmani explains in great detail the essentials of image compression. The book begins with an argument: All images should be properly compressed, All compression should be automated, the next book, in turn, introduces how to determine whether you need images compression, how to choose appropriate image format, JPEG format and compression techniques, WebP is introduced and the browser support, SVG compression techniques, avoid duplication of compression, Sprite figure, cache content, preload, etc; More information on performance tuning can be found here.

  • Lessons learned during the React 16 migration: After Facebook officially released React 16.0, the new Fiber rendering stream brought even more performance improvements; In this article, the Discord engineers share their experience of upgrading their existing application to the React 16.0 version. This article first analyzed a series of feature changes such as ErrorBoundary in the new version of Discord, and shared an internal discussion about whether an update was necessary. It then describes how to fix PropTypes using Jscodeshift, how to safely remove old internal API usage, how to upgrade dependencies, and what upgrades need to be done in React Native. Learn more about React here.

The open source project

Willing to share, push forward the front-end development

  • Vuera: Vuera is an integration framework that supports both React and vue. js components. It allows developers to implement vue. js components in React, or vue. js components in React. The Vuera is a good experiment, but how well it performs remains to be seen.

  • Nest: Nest is a TypeScript based framework for building high performance and extensible Node.js applications. It integrates object-oriented programming with functional programming FP and functional responsive programming FRP. Nest provides interfaces to well-known frameworks like Angular and Express, with built-in features like WebSocket, responsive microservices support, pipes, and more.

  • Sentineljs: Sentineljs is lightweight, allowing you to set up listening targets through CSS selectors and dynamically monitor libraries created by new DOM nodes; It automatically calls the callback function after monitoring that a new DOM node has been created. Compared to other solutions, SentinelJS uses the AnimationStart event in dynamically defined CSS Animation rules to listen for the presence of an element, which provides better performance than Mutation Observer.

The peak of life

  • To become an architect, you must first… : This article is about Frank Chen, an Internet veteran, sharing his views and understanding of architects, as well as his discussion on the various capabilities required to become an architect. The author first analyzes what the architect and architect in the positioning of the team, and then discussed the similarities and differences between the architect and the traditional domain experts, and finally he shares its architect should have the ability, from the basic logic, abstraction, imagination, into the empty cup, curious, practice point of view, as well as the technical architecture and organization structure to wait.

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”.

Front end top oF wechat bottom picture -5.jpg