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

  • Intel CPU has been discovered to have a major design flaw. Common user programs can identify the kernel layout and contents of the protected area. All cpus that have access to virtual memory can be accessed unauthorized, and a fix for this problem can result in significant processor performance degradation. The same technology can be used in browsers to read private content from different sources, according to security researchers at Mozilla. Major browser vendors are working to circumvent this problem by, for example, limiting the execution interval of performance.now() or disabling SharedArrayBuffer by default.

  • FuseBox 3.0 release: FuseBox is a lightweight packaging tool, and the 3.0 release has improved performance by about 20%. It can package large projects in 50 to 100ms. The new version supports zero-configuration code splitting, updates the task runner, optimizes the TypeScript package distribution process, and provides significant speed and stability.

  • Storybook 3.3 released: Storybook 3.3 was released in the New Year, bringing support for Angular. This version supports Storybook for Angular 4+ projects and allows developers to set different viewports to simulate devices at different resolutions. There is also support for previewing test results directly in Storybook, see the original article for more feature changes.

Development tutorial

Step by step, master the basics

  • 2017 has seen the Node.js community become more active; This article has selected 25 outstanding examples from over 4,700 Node.js open source projects released last year. These projects cover different functional directions, such as Headless Chrome Node API Puppeteer, faker.js for creating simulated data, Pkg for packaging Node.js projects as executable files, Sharp for image manipulation, Portainer for Docker interface management and so on. For more node.js information, see here.

  • React, Apollo, and GraphQL: This series of articles provides step-by-step instructions on how to build a complete short link service using React, GraphQL, and Node.js. The first article introduced how to build the short link display interface using GraphQL and React. The second part introduced the short link construction service, and then discussed how to create Serverless Function for calculating Hash. The next part analyzed how to record statistics such as clicks. Finally, how to add user authority authentication is introduced. See React and Front-end engineering practices for more React tutorials.

  • Explore how the V8 engine converts JavaScript to machine code: Using the native method of extending V8 as an example, this article describes how the V8 engine converts JavaScript into machine-code instructions that can be executed by the CPU. V8 is an open-source JavaScript engine from Google that converts JavaScript code to low-level machine code. V8 implements the ecma-262 standard, which can be run independently or nested within other C++ programs. See the V8 Engine Data Index for more V8 information.

The engineering practice

Base on practice, prompt actual level

  • PWA case in point from Tinder: As Safari started supporting ServiceWorker, the future of PWA became brighter; This article describes how Tinder optimizes JavaScript performance, uses Service workers to provide network resiliency, and uses Push notifications to prompt sessions. Similarly, this paper first makes a quantitative comparison of Tinder application performance in different network environments before and after the transformation, and then successively discusses Loadable based code segmentation, resource caching and preloading, CSS loading strategy, runtime performance optimization and other contents. For more information on PWA, see the PWA Learning & Practice Resource Index.

  • Front-end Performance List 2018: Performance optimization has a long way to go. As hardware devices, browsers, and development technologies evolve, optimization techniques are constantly changing. This article is the latest performance optimization summary list. This article is not limited to the technology itself, but also discusses how to get through the whole optimization process and build a continuous optimization development culture. In this paper, tuning planning and performance evaluation, setting reasonable goals, constructing appropriate environment, optimizing construction process and resources such as pictures and texts, and optimizing distribution process are discussed successively. For more Web performance tuning discussions refer to modern Web application architectures and performance tuning.

  • Web Layer performance optimization for Modern browsers: The Internet has been around for decades, and this article looks at the techniques modern browsers use, primarily at the web layer, to automate performance optimization. Browser performance is affected by many factors, among which the network layer is often the bottleneck, and the browser hides many low-level implementation details for us. This paper introduces Socket management, network security and sandbox, resource and client state cache, application interface and protocol. For more Web performance tuning discussions refer to modern Web application architectures and performance tuning.

Deep reading

Deep thinking, sublimation development wisdom

  • Robust client-side JavaScript code: JavaScript has become a must-have tool for modern Web developers, and websites are increasingly using JavaScript to improve interactivity. However, as the complexity of client-side JavaScript code increases, the probability of errors in user usage increases. This short book discusses what robustness is in JavaScript code and how to ensure it. The book begins with a discussion of JavaScript features and general definitions of robustness, then lists the exceptions and failures that can be thrown in JavaScript, and concludes with dozens of ways to avoid or suppress errors. More JavaScript tutorials refer to modern JavaScript Development: Syntactic basics and engineering practices.

  • 2017 Vue.js Inventory: This article is a year-end inventory of vue.js, summarizing the changes and achievements of vue.js and its community in 2017. In the past year, vue.js has received more than 40,000 stars, and the performance, ease of use and robustness of the framework itself have also been improved. Server-side rendering, exception handling, and more have also been optimized. In addition to the internal changes, the entire stack of frameworks such as Element, Framework7, Onsen UI, Vuetify, Vue-Material, and Quasar have all received major updates and expanded data. In addition, native integration extensions such as Weex and Nativescript-Vue have made significant progress, and larger teams or companies such as Adobe, GitLab, AND IBM are gradually using vue.js.

  • GraphQL was first launched in 2015. With the advent of Apollo, GraphCool, and other excellent frameworks, GraphQL has grown rapidly in 2017 and will continue to grow in 2018. This article is a roundup of the changes and achievements of GraphQL and its community over the past year. This paper first introduces the views of GraphQL from IBM, Walmart and other giants, then lists the GraphQL big events that happened last year, and finally looks forward to GraphQL’s planning in 2018.

  • How I Stole credit card account passwords from web pages: This article tells the story of how some attackers used NPM to inject infiltration code and gather all kinds of information into some widely used open source tools.

The open source project

Willing to share, push forward the front-end development

  • Majestic: Majestic is developed based on Electron to interface view and control the application of Jest test cases. The Jest CLI itself already provides a very friendly testing experience, but Majestic wants to further optimize the development testing experience with an interactive approach.

  • TeaVM: TeaVM is an AOT compiler for Java bytecode, which compiles Java bytecode into JavaScript and WebAssembly. Unlike the famous GWT, TeaVM doesn’t require source code support, just compiled bytecode files; This also means that TeaVM naturally supports Scala and JVM dialects like Kotlin.

  • Stimulus: Stimulus is a helper front-end framework that does not involve the actual HTML rendering process and does not attempt to take over the entire front-end application. It is designed to enhance current HTML with as little intervention as possible, and when used in conjunction with Turbolinks, can be used to improve application performance with minimal modification.

  • Uppy: Uppy is a new generation of modular file upload controls that integrate seamlessly into any Web application and provide an easy-to-use interface. Uppy has built-in support for fetching data from local disk, Google Drive, Dropbox, Instagram, Camera, and more. It also provides a good preview interface, and allows you to view and control the upload process. See the original article for more features.

The peak of life

  • At the end of the year, the binary tree, whose mission is to “record the techies who keep pace with The Times,” asked ten techies the same question: What did you experience in the past year? There were senior technical manager of Web front end from Baidu, engineer of Google Developer Platform and CTO of Huobi. They talked about the development of technology from different angles and their expectations for the next year.

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