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

  • FCC repeals Net neutrality: So-called net neutrality, which requires Internet service providers not to favor or deliberately limit traffic from certain websites. Former President Barack Obama signed an order in 2015 regulating ISPs under the 1934 Federal Communications Act’s “Category 2” business, which allows the FCC to enforce the law and prohibit ISPs from giving preferential treatment to any company. By repealing net neutrality rules, the Federal Communications Commission earlier stopped explicitly prohibiting Internet service providers from favoring traffic from certain websites.

  • Expo SDK v24.0 released: The Expo SDK 24.0 was released this week and is based on React Native version 0.51; At the same time, the official website of Expo has also been greatly updated, with new interfaces for search, project creation and discovery. Offline image support is added in this version, which avoids the need to load network images every time the application is initialized. At the same time, added iOS permission dialog box configuration, optimization of ImageManipulator, ImagePicker interface functions.

  • React Studio is a graphical and interactive React application development workbench. This article introduces the features included in the latest 1.3 release of React Studio. First, the overall performance and interaction experience has been improved, and support for multiple languages has been added, while Mock data creation has been optimized. It also introduces new cards, selectors, and a host of new components.

Development tutorial

Step by step, master the basics

  • Basic JavaScript code pieces: This article has compiled many concise and elegant JavaScript development used in the code pieces, both suitable for beginners to learn the syntax, but also to help developers to learn new. This article covers the common handling of arrays, browser elements and locations, times and dates, functions and functional programming, mathematical formulas and calculations, Node.js, Object, strings and many other utility classes; See Modern JavaScript Development: Syntactic Fundamentals and Engineering Practices for more JS learning materials.

  • Clear the resource cache in the browser: The browser cache is one of the most common and significant front-end performance enhancements. However, if we mistakenly set certain resources up for long-term caching, we need to find a way to force a refresh of those resources. This article discusses how to force a browser to flush certain resource caches, Reload, vary + fetch, fetch + cache:reload, fetch + POST, iframe POST, clear-site-data, etc. More browser storage operations refer to modern Web development basics.

  • RSA encrypted communication application based on Vue. Js: Encryption is one of the cornerstones of modern Internet, this paper is to build a simple encrypted chat application, to guide readers to understand the basic concept of encryption and decryption algorithm. This paper first introduces the concept and implementation of 2048-bit RSA encryption algorithm, and then uses vue. js to write the front-end interface, and uses Node.js and socke. IO to write the server to coordinate the messages of each client. For more information about vue.js, refer to vue.js Reference.

The engineering practice

Base on practice, prompt actual level

  • Current implementation and future plans for ESM: The ES Modular standard was first released in ECMAScript 6 in 2015, and now we can use ES Modules in three major browsers. Node.js currently adopts common.js modularity, and we can introduce other modules in the application through the require method. The huge differences between the two module mechanisms make it difficult to integrate common.js with ESModule; ESModules have been available to developers experimentally since Node.js 8.9.0, and this article is an introduction to community feedback and future plans for ESM. For more information, see JS Reference.

  • Component Data Interaction based on Apollo: In this article, Werkspot engineers share their experience in developing applications using The Apollo Client and React Native together, focusing on the ease of use and flexibility brought by GraphQL. The author first discusses the composition of the query component, then analyzes how to combine the query component and Mutations, and finally discusses how to test the query component. See here for more information on GraphQL.

  • Transforming REST APIs into real-time APIs: a key component of the real-time interactive modern technology stack to meet the high-speed and frequent data needs of users and enterprises; This article shows you how to use the open source Pushpin to convert a REST API into a real-time API. This article first introduces the difference between request-response architecture and event-driven architecture, then compares existing event interface solutions, and finally introduces the features and deployment of Pushpin. For more server-side architecture discussions refer to server-side application development basics.

  • Designing the Cross-platform Build process for Electron Development: In this second installment of the Electron series, I will share with you how I built an automated Electron development build. In other words, how to turn the code into a package that users can download and install. Of course, with the improvement of application complexity and technology selection, engineering system may be reconstructed or evolve at any time, but at least I can give you some reference, welcome to leave a comment. Engineering automation should be a fundamental pursuit for all developers. When you build the engineering system, you will focus on the development of product features and not spend a lot of unnecessary time building it manually. More information on Electron is available here.

Deep reading

Deep thinking, sublimation development wisdom

  • The State of JavaScript 2017: After a long investigation and data collation, The 2017 JavaScript Usage Report is officially released; This report brings together the views and experiences of tens of thousands of developers on the big front-end stack, including syntax, front-end frameworks, state management, server-side frameworks, testing, CSS, build tools, mobile frameworks, and more. This report still describes how developers feel about a framework or tool at the following levels: happy to use it, using it, preparing to use it, not interested in it, never heard of it. In addition, the report provides a so-called Connections diagram that measures the correlation between users’ different technologies, such as how many React users still use Redux. More JS tutorials refer to modern JavaScript development: Syntactic basics and engineering practices.

  • NectarJS: Compiles JavaScript into platform-specific binaries: In this article, Adrien Thierry, who has been working on a way to compile JavaScript into platform-specific binaries, introduces the open source NectarJS design concept and implementation mechanism. NectarJS is positioned as a compile-as-service format that optimizes the performance of JavaScript itself while allowing it to be compiled for WebAssembly, IoT, Windows, OSX, Linux, and many more platforms or targets. More JS tutorials refer to modern JavaScript development: Syntactic basics and engineering practices.

  • REST is the New SOAP: The author of this article shares his view of REST, which is inevitably subjective and can be viewed dialectically. The author first discusses the shortcomings of RESTful apis, whose abstract and concise principles often fail to meet the problems in real business scenarios. Then the author discusses REST verbs, error handling, and even basic conceptual shortcomings. Instead of discussing his ideal solution, the author throws up a lot of questions for the reader to ponder. For more server-side architecture discussions refer to server-side application development basics.

  • Using machine learning to break through image verification code: Image verification code is one of the common security firewalls in modern web pages, which can be used for man-machine recognition and avoid crawler and other malicious crawling behavior; This article takes the famous WordPress image captcha plug-in as an example to introduce how to use machine learning to break through the limitations of captcha. In this paper, the author mainly uses Python 3, OpenCV, Keras, TensorFlow and other common machine learning libraries and tools. First, the author introduces how to use WordPress plug-ins to create training data sets. Then the basic principle of deep convolutional neural network and how to train the neural network are introduced. Finally, how to use the trained model for image recognition is introduced. More information on Web security can be found here.

The open source project

Willing to share, push forward the front-end development

  • Exercis. IO: exercism provides exercism with hundreds of practice problems for more than thirty programming languages to help developers learn and master a particular programming language through practice. Exercism also provides convenient client tools to help developers quickly set up an experimental environment and to allow developers to share their insights and solutions.

  • Microbundle: Microbundle is a Rollup based zero-configuration small module packaging tool that developers need to install and configure the basic commands in package.json to use. Microbundle automatically detects files such as index.js or cli.js as entry files and automatically compiles them into various formats such as CommonJS, UMD, and ESM.

  • WAlt: WAlt can act as an intermediary for WebAssembly text formatting, which attempts to enable developers to use JavaScript syntax to write.Walt code directly and then compile it directly into WebAssembly. WALt’s advantage is that it doesn’t need C/C++ or Rust, it just needs to know JavaScript; The compilation process does not require binary tools such as LLVM and can be integrated into tools such as Webpack.

The peak of life

  • Ten-year IT veteran: The change in thinking is far more valuable than simply improving technology: This article is excerpted from professor Zhao Cheng’s “Zhao Cheng’s Operation and Maintenance System Management Course” on geek Time App. IT is his review and summary of his ten-year technical career. Professor Zhao Cheng is from Meili United Group, whose two main products are Mogujie and Meili. He is currently responsible for managing the technical service team of the group. In this article, the author successively shares why I choose to embark on the road of operation and maintenance? , the change in operation and maintenance thinking is far more valuable than simply improving operation and maintenance technology, column composition and other content.

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