Front-end Weekly List Issue 40: JS Core and Cost, Node overflow debugging, Software 2.0

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

  • Atom releases Code Collaboration tool Teletype: This week Atom released Teletype, a remote collaboration tool that allows developers to pair program in a PEER-to-peer manner. Despite the bugs in the Beta, look for more convenient team collaboration tools in the future. At the same time, VS Code also released a so-called Live Share plan, which also allows developers to collaborate on real-time Code editing using Visual Studio 2017 or VS Code.

  • Firefox 57.0 release: Firefox Fast Again! Firefox 57.0 was released this week, bringing a new and enjoyable experience to Firefox users. The biggest change in this release was the introduction of a browser engine for modern devices: Quantum; The user interface has been redesigned to provide a crisp, touch-friendly interface. For more details, see the original article or Quantum Debunking below.

  • Github launches security alerts: Last month Github introduced Dependency Graph, which allows JavaScript and Ruby repositories to be visually mapped. Github has released a security alert feature for the repository that automatically detects vulnerabilities in Dependency Graph when the user opens it. As soon as a bug dependency is discovered, it will provide feedback to the developer.

  • Expo SDK 23.0.0: The Expo SDK 23.0.0 was released this week and is based on React Native 0.50; React 16.0.0 was also officially introduced to make use of features in the new React release. The Release Channels feature was also introduced, allowing developers to Release and update their apps more easily. It also supports background fetching of iOS OTA updates. In addition, the release has updated JavaScriptCore in Android, updated Snack, and the performance of several apis.

Development tutorial

Step by step, master the basics

  • Complete Angular Beginner’s Guide: This is a complete Angular beginner’s guide that not only guides developers step-by-step through building simple Angular projects, but also covers the basic concepts in Angular. This article first introduces the concept and positioning of Angular, including SPA, Angular framework and the composition of the platform, the relationship between Angular versions and so on. Next, this article introduces the Angular CLI and how to use it to build simple projects, and discusses the role of common parameters in the Angular CLI. Then this article analyzes the directory structure and file meaning of Angular projects on the basis of simple projects. Finally, starting with the syntax of Angular components, it introduces the syntax and interfaces of key components such as services and modules. More Angular resources are available here.

  • React everything you need to know about React: Many people are already familiar with or using React, but it’s changing all the time. This article is a good introduction to React and gives you a sense of what it’s all about. The React component, ReactDOM rendering, class and functional components, JSX, State, event handling, asynchronous setState, Props, Refs, etc. See React and front-end engineering practices for more React tutorials.

  • Functional Programming Hands-on Tutorial: This article is a summary of the author’s LinkedIn talk, explaining how functional programming and its combination of ideas can help developers write better code; Rather than focusing ona particular language or obsessing about Monads. Beginning with the introduction of functional programming by Fortran author John Backus forty years ago, the author discusses the significance of Composition in computer science. Then, taking Java and JavaScript as examples, this paper discusses how to decompose complex problems by combination and organically combine functional and detailed solutions into overall solutions. More information on functional programming can be found here.

The engineering practice

Base on practice, prompt actual level

  • JavaScript costs and Optimizations: This article is another masterwork from Addy Osmani, looking at how to quickly improve site loading and user responsiveness on mobile devices. This paper explains how to reduce the package size and the amount of transmitted data, optimize the parsing, compilation and execution of JavaScript code, and how to practice PRPL mode. More information on performance tuning can be found here.

  • In this article, the author shares his recent experience in extending the React server rendering process. Although many of the discussion points in this article are React related, the general expansion challenges faced or the problems solved are worth repeating. This article does not discuss React server optimization directly. Instead, it starts with common load balancing and introduces common load balancing algorithms and strategies. Then it discusses the bottom-of-the-envelope solution of client rendering, that is, how to give users appropriate feedback when the server cannot respond in time due to the heavy traffic. Next, this paper also discusses hierarchical unloading, component caching, dependency handling, isomorphic rendering and other contents. See React and front-end engineering practices for more React tutorials.

  • Memory Leak and Memory Bloat debugging in Node.js: Memory Leak is one of the most common pain points in server-side applications. In this article, I share my experience in Memory Leak and Memory Bloat debugging. The so-called memory leak refers to the unused memory is not released, and memory inflation refers to the use of excessive memory; The authors describe the use of heap snapshots and Chrome DevTools to help track, collect, analyze, and resolve these memory problems. If you want to learn about JavaScript memory debugging in Web applications, refer to the article Memory Analysis and Memory Leak Location.

  • Front-end testing Pyramid: Rethink your Testing: This article takes a look at front-end testing, starting with the so-called test pyramid structure, and combs through the key content and design concepts of front-end testing. The author thinks that the so-called front-end test pyramid consists of unit test, snapshot test and end to end test from bottom to top. Then, taking simple modal pop-ups as an example, the design essentials of each test module are introduced. In general, unit tests are used to test atomic objects such as functions and classes in a code base, while snapshot tests can record the rendered state of components and compare them over time. End-to-end testing is used to ensure the final experience of the product in the black box. See here for more information on Web testing.

Deep reading

Deep thinking, sublimation development wisdom

  • JavaScript. The Core second edition: This is The second edition of The JavaScript Core Overview, focusing on The ECMAScript language standard and its Core runtime components. This article introduces the concepts of Object, Prototype, Class, Execution Context, Environment, Closure, This, Realm, Job, and Agent. More JavaScript tutorials reference modern JavaScript syntax basics and engineering practices.

  • WebAssembly is now supported by all major browsers: In the past few weeks, WebAssembly has been supported by all the major browsers, including Apple’s Safari and Microsoft’s Edge, which are already supported by Firefox and Chrome. With extensive browser support, developers experimenting with new features developed using the WASM module will reach the vast majority of users. This widespread support is due to the early success of the ASM.js project, as it is a subset of JavaScript and therefore runs on all browsers, such as Facebook’s Candy Crush Saga social games.

  • Software 2.0: This is Andrej Karpathy, Head of AI at Tesla, giving his view of the future of Software. It can be read with a critical attitude. Software 1.0 is when programmers write code in Python, C++, Java, etc., which is then compiled into machine code instructions or executed by an interpreter. Each line of code gives the program a specific function. In the author’s opinion, deep learning is software 2.0, neural network is not only a classifier, but also means that the programming foundation begins to change, and developers can also program with the weight of neural network. Software 2.0 has homomorphic computing, easy to burn, continuous operation, constant storage, efficient computing, very agile and other characteristics.

The open source project

Willing to share, push forward the front-end development

  • Datasette: Datasette provides us with an out-of-the-box, read-only JSON API for SQLite databases; Datasette also offers tools for packaging databases as Docker containers and deploying them to cloud containers such as Zeit Now.

  • SQL Operations Studio is an open source data management tool developed by Microsoft. It supports SQL Server, Azure SQL DB, SQL DW and other Microsoft databases. SQL Operation Studio is deeply integrated with VS Code and runs on mainstream operating systems such as Windows, macOS and Linux. SQL Operations Studio provides SQL Server connection management, object query, complete T-SQL editor, multi-format data source export, data backup and rollback, custom scripts, historical task query and other rich features.

  • Luxon: Luxon is a library for manipulating time and date objects in JavaScript by Moment. Luxon can be seen as a modern interface package for moment.js. Luxon provides DateTime, Duration, Interval extension types, supports chained functional style interface calls, parses and transforms time strings in common formats, and does not require locale or TZ files for internationalization conversion.

The peak of life

  • React: Facebook acquires Instagram and react. js React has undoubtedly become one of the most well-known and popular JavaScript interface libraries, with over 70K stars on Github, over 1100 contributors and over 6 million downloads per month, and it has been used in thousands of companies’ tech stacks. But when React came out, not many people cared about it; This is a summary of Stack Stories, written by Pete Hunt, one of the original creators of React, to share the story before and after React: Why React was created, how it gained Facebook’s attention, and what process it went through before it came to the public eye.

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