Node.js v8.0 will be released, and React will be migrated to Vue. The future of front-end development will be provided by InfoQ. For reprint, please contact InfoQ Chinese. The front-end weekly checklist series is part of the author’s Web front-end primer and engineering practice; Some articles need to bring their own ladders.

Node.js V8.0 release, Migration from React to Vue, the future of front-end development

Front End Weekly list

The front-end weekly list focuses on front-end content, divided into hot news, development tutorials, engineering practices, in-depth reading, open source projects, peak life and other columns. Pay attention to [front top] wechat public account (ID: Frontshow), timely access to the front weekly list.

The news

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

  • Node.js LTS V8.0 release: On May 30, Node.js announced on its official blog the release of Node.js V8.0.0, codenames Carbon, which brings a number of important feature improvements and a number of new features. Typical changes include the introduction of Async_hooks to monitor asynchronous operations, the introduction of N-API to develop native plug-ins, improved Buffer security, and the upgrade of NPM to version 5.0.0 (front-end weekly List: Node.js V8.0 release, migration from React to Vue, the future of front-end development)

  • In Google IO 2017, Paul Irish wrote an article titled DevTools: State of the Union talks about the new features coming to Chrome DevTools. New features include new Audits panels based on Lighthouse, third-party request identifiers, stepped-debugging support for asynchronous code, and more. ( parg.co/bJR )

  • Github announces full migration of THE V4 API to GraphQL. Github has announced in a blog post that it will use GraphQL only in the V4 API and will no longer provide a RESTFUL interface. Github believes that GraphQL offers significant flexibility and convenience to help users build queries and retrieve data more easily and flexibly. ( GitHub API | GitHub Developer Guide )

  • Styled – Components V2 Release: After 6 months of iterations and over 300 submissions, Styled – Components announces the release of its V2 version. The package size is further reduced, and critical path CSS extraction is provided, as well as many new apis. ( parg.co/bJM )

Development tutorial

Step by step, master the basics

  • Node.js Streams: Node.js Steams has long been criticized for being difficult to understand and use, and in recent years many developers have created libraries to make it easier to use Node.js Streams. This article, however, focuses on the basic syntax of Node.js Streams and clears up common misconceptions. This article first introduces the concept of Stream with a simple example of using Stream to read a file, and then introduces four streams in Node.js and how they are implemented. ( parg.co/bJN )

  • 8 Common NPM Tips: NPM is an inevitable scripting tool for front-end development, and this article introduces several common NPM tips. This includes initializing packages, running tests, enumerating available script commands, viewing installed packages, and more. ( parg.co/bJO )

  • REST API Basics: As one of the current mainstream definitions of interface styles, REST plays an important role in data interaction. This article starts from the basics of REST style to introduce the origin of REST, the design concept of REST, and the aspects and principles that should be considered and followed when designing RESTful apis in real applications. (restful. IO/rest – API – b….).

  • React to Vue.js: React and Vue.js are both excellent front-end frameworks, and different teams may have different preferences in different application scenarios. This paper records the author’s thinking process in migrating from React to vue.js. This article first introduces the similarities and differences between React and vue.js, compares their common syntactic features and ecosphere, and discusses the reasons for migrating from React to vue.js. ( Switching From React To Vue.js )

  • Vuex-based Vue Application State Management: As with other component-based frameworks, tracking state for VUe-based applications becomes more cumbersome as they grow in size and functionality. This paper analyzes the pain points of state management and introduces how to use Vuex for Vue application state management. ( State Management in Vue: Getting Started with Vuex )

The engineering practice

Base on practice, prompt actual level

  • Pain Points, Analysis, and Improvement for Redux State Management: How to design a Redux Store? This is one of the most common questions Redux is asked in practice. You may have your own way, but something is not quite right. This article hopes to analyze and compare with Redux from what state is to state management in Elm to find problems and deduce feasible improvement methods. (Pain point, Analysis and Improvement of Redux state Management)

  • JavaScript Unit Testing Frameworks Chaos: Jasmine, Mocha, AVA, Tape, and Jest: When starting a new front-end project, we often think about which unit testing framework to use or which code to add unit tests to. This paper makes a horizontal comparison of the commonly used unit testing frameworks in Web development, such as Jasmie, Mocha, AVA, Tape and Jest. Based on my own experience, this paper proposes the options of different unit testing frameworks in different application scenarios and requirements. ( JavaScript unit testing frameworks: Comparing Jasmine, Mocha, AVA, Tape and Jest )

  • React Europe 2017: This post, written by The author at the React Europe Conference 3, is a great way to get a glimpse of the React ecosystem and where it’s headed. This article starts with an introduction to the upcoming React 16 and the new harmonic algorithm Fiber, then introduces some tools to help build high-quality JavaScript code, and finally discusses stream-based frame-by-frame rendering. ( parg.co/bJt )

  • Common Recompose HOCs: Recompose, published by Andrew Clark, is a handy auxiliary library for building higher-order components. This article introduces practical uses of common HOCs such as Branch, mapProps, withState, lifeCycle, and Nest. ( parg.co/bJV )

  • Flexbox Spec: Flexbox is one of the most common layouts in Web front-end development. It is easy to use and flexible. However, after reading the Flexbox Spec, the author of this article made a number of discoveries beyond basic usage. This article introduces margin, min-width, and the hidden nature of each property in Flex layout. ( parg.co/bJJ )

Deep reading

Deep thinking, sublimation development wisdom

  • “Vue 2017 Status and Outlook” : On May 20th, at the first VueConf in the world, the author of Vuue. Js, You Yuxi, introduced the current status of Vuue. Js 2017 and made a forecast for the future of Vue. This article is a review of the presentation. For more Vue related content, please pay attention to the top of the front-end public account and reply to “Vue”. (Vue 2017 status quo and prospect | video + + shorthand quickly review PPT)

  • Composing in Software Development: In Composing for Software development, Eric Elliott wrote a preface to his Composing Software series on functions and objects commonly used in Software development. The process of our software development is to continuously combine small modules into a complete system step by step. We inevitably need to combine and schedule multiple functions, or combine simple classes into complex business classes by inheritance and other means. ( parg.co/bJ4)

  • “The Future of Web Front-end Development” : The author of this paper imagines the possible direction of future Web front-end development from his own practice; These include new JavaScript features and deeper state management, the transition from simple interfaces to full systems, the erosion of the border between native and Web, the modularization of CSS and the obsolescence of preprocessors, performance remaining a key bottleneck, and urls Will become more and more important. ( What is the Future of Front End Web Development? | CSS-Tricks )

  • Uniform Style Language: CSS-in-JS has developed rapidly in recent years, and various implementation libraries have emerged in an endless stream. The author of this paper, also one of the authors of CSS Modules, introduces the characteristics and problems of CSS-In-JS from a strategic perspective, and combs out people’s misunderstandings about CSS-In-JS before. In addition, it compares the advantages and disadvantages of several CSS-IN-JS and its application scenarios. Finally, it also imagines the future of CSS-In-JS. ( parg.co/bJi )

The open source project

Willing to share, push forward the front-end development

  • Chromatism: Chromatism is a collection of functions for common color conversion operations, providing color conversion, chromatic difference color temperature calculation, and other functional functions. (github.com/toish/chro….).

  • Workbox: Workbox is a JavaScript library from the Google Chrome team that quickly converts existing Apps into Progressive Web Apps; Workbox allows you to quickly create and load ServiceWorkers for current application resources using Webpack plug-ins, Gulp plug-ins, and NPM scripts. ( workboxjs.org/ )

  • Hyperloop: Hyperloop is a release and scheduling system that serves meituan-Dianping client, including component release, continuous integration, App packaging and construction, and resource scheduling. After accessing the Hyperloop system, developers can manage their own projects through Hyperloop, and configure the steps and check items needed for release and packaging. After the development is complete, users only need to log in to the Hyperloop to perform related operations. The Hyperloop will invoke different steps according to the configuration of the project, report the status of each step, and provide error logs and status notifications. ( tech.meituan.com/iOS_H… )

  • Pix2code: Pix2Code relies on deep learning to turn interface images from designers into code in iOS and other clients. (github.com/tonybeltra….).

  • Birdview.js: Birdview.js is a very interesting JavaScript plug-in that gives the user a bird’s eye view of the entire page and allows direct access to the selected point. ( achrafkassioui.com/bir… )

The peak of life

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