The author | and ask moon bears

Edit | tail end

Because wechat does not support external chain, it provides a short link after the relevant content, which is convenient for everyone to copy. See this article take link please click: zhuanlan.zhihu.com/p/26027479.

The news

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

  • Angular 4.0.0 Release: Today the Angular team announced the release of version 4.0.0, which is backward compatible with most 2.x.x applications. The major changes introduced in 4.0.0 include smaller and faster apps, an updated view engine, a nearly 60% reduction in generated code, and the introduction of an animation library as part of the pre-built core library. ( parg.co/bsw )

  • Egg.js 1.0.0 official release: Egg.js is a plug-in of enterprise-class Node.js framework deposited from the best practices of ali in different fields. It covers common business development scenarios and has steadily supported tmall Double 11 promotion in 2015 and 2016, with top traffic pressure. It is progressive and scalable, suitable for both rapid development of individual small projects and enterprise-level team development collaboration. ( zhuanlan.zhihu.com/p/25860846 )

  • WebStorm 2017.1 adds support for Vue. Js: JetBrains has released version 2017.1 of its most popular WebStorm IDE, adding support for ue. Js without exception. WebStorm now recognizes.vue files and adds code completion to templates. WebStorm will also be able to auto-complete the code and automatically add import statements when referencing other view components. ( parg.co/bQU )

Development tutorial

Step by step, master the basics

  • Angular 4 Learning Resources: With the official release of Angular 4, this article collects resources for learning Angular 4, including feature summaries, server-side rendering, responsive programming, style guides, and more. ( parg.co/bQ0 )

  • CSS Grid Examples: This site provides a series of test examples of CSS Grid layouts written on React. It is a good tutorial to learn the syntax and usage of CSS Grid from examples. (sii. Im/playground /…).

  • Webpack Hands-on Tutorial: This series of tutorials focuses on the use of Webpack in real-world applications and consists of three sections: building a basic front end project and adding build support, reducing package size and caching, and speeding up build and development workflows. ( parg.co/bsL )

  • Modern JavaScript Tutorial for “Ancient” Web Developers: This article is an introduction to the basic concepts of modern JavaScript that are common to Web developers who have been working on Web technologies since the days of PHP, JSP, and Rails. ( parg.co/bsF )

  • What you Should Know about Module imports in Node.js: We’ve been dealing with the module mechanism all the time in Node.js development. In this article, the author introduces the two core modules in Node.js that handle module dependencies in a simple way: require and module; It also introduces the actual recursive processing flow of different imported objects in Node.js and the metadata description formed in module. ( parg.co/bQl )

The engineering practice

Base on practice, prompt actual level

  • Dropbox: Using Same-domain Cookies to Avoid Cross-site Attacks: Cross-site request forgery (CSRF) is one of the most common types of network penetration attacks. In this article, Dropbox engineers share some common defense practices they use, including dynamic form tokens, same-domain cookies, and more. (parg.co/bs5)

  • Cross-browser Plug-in Template: With Firefox also beginning to support WebExtensions, it became easier to write cross-browser plug-ins that could reuse as much code as possible. This warehouse provides the basic plug-in template, the realization of a preparation, multiple running, hot loading and other convenient functions of the preset. ( parg.co/bsi )

  • VSCode Tips and Tricks: VSCode is a very lightweight and easy-to-use software development tool with a rich system of plug-ins to meet your development needs. This article is a summary and introduction to a series of TECHNIQUES for using VS Code, such as common command manipulation, file management, Git integration, debugging, and task running. (parg.co/bsk)

  • Decoding Asynchronous JavaScript Programming: Asynchronous programming in JavaScript has gone through many big iterations, from callbacks to promises to generators and now Async/Await; In this paper, the author introduces the history of asynchronous programming in JavaScript and briefly introduces the internal implementation principle. ( parg.co/bsz )

  • Webpack CommonsChunkPlugin and Multi-entry Common Code Extraction: The CommonsChunkPlugin is a common code extraction plug-in commonly used when building webPack-based front-end workflows. This article is the Webpack development team for community feedback CommonsChunkPlugin in the process of using some mistakes and synchronous/asynchronous common code block extraction practice summary and analysis. ( parg.co/bQb )

  • Building Maintainable Large Angular 2 Applications: This article is a presentation by engineers from Versett on their team’s practice of building large Angular 2 applications. ( parg.co/bQm )

  • React Native and Redux: A Year of Mistakes In this article, the author summarized the mistakes he encountered in React Native and Redux development over the past year, such as layout file segmentation, Redux Store design, project directory structure, form validation, etc. ( parg.co/bQS )

Deep reading

Deep thinking, sublimation development wisdom

  • WebAssembly is the new executable format in the Web. Modern browsers have provided native support for WebAssembly. This article provides a brief overview of the principles behind WebAssembly’s performance improvement over ASM.js. (parg.co/bsv)

  • “Common pitfalls of ES7 Async/Await” : Promises introduced in ECMAScript 6 greatly simplified asynchronous programming syntax in JavaScript, while Async introduced in ES7 made it more elegant; The author of this article has analyzed common cases of syntax misuse of Async/Await in practice. ( parg.co/bsW )

  • React Conf 2017 ReactVR, ReactVR, ReactVR, ReactVR, ReactVR, ReactVR, ReactVR, ReactVR, ReactVR, ReactVR ( parg.co/bsg )

  • Baidu SSP Single-page Application Performance Optimization Practice: In view of the slow opening of the home page and some pages, baidu SSP front-end team optimized the single-page application performance. This paper introduces one of the solutions: a first screen data progressive preloading scheme based on HTTP Chunk, which reduces the first screen rendering time of a single page application by 1.2s. At the same time, it compares the similarities and differences with the isomorphic rendering scheme. ( parg.co/bQH )

  • Composing Software: This series of articles, published by Eric Elliott, focuses on the introduction to JavaScript functional programming and organizability techniques in large software projects. The articles include introduction to Functional Programming, Higher-order Functions, Reduce, Functors & Categories, etc. It is still being updated. ( parg.co/bQY )

  • Redux Practice Discussion: This is a Redux Issue discussion by Mark Kerikson about redundant Redux templates, excessive abstraction, a tortuous learning curve, and too many Opinioned best practices. (github.com/reactjs/red…).

The open source project

Willing to share, push forward the front-end development

  • React-native Interactable: React-native Interactable is a declarative interface released by WIX for creating high-performance user interaction effects. Typical user scenarios include sliding cards, drawer menus, telescoping applications, chat, etc. (github.com/wix/react-n…).

  • Awesome – Github-Vue: Awesome – Github-Vue is a collection of vUE related open source project libraries organized and maintained by OpenDigg. (github.com/opendigg/aw…).

  • React-overdrive: A very easy to use transition animation library for the React app. You can specify elements with the same ID between different pages, and OverDrive will automatically add transitions between the two elements. (github.com/berzniz/rea…).

  • “Eagle. Js” : Eagle. Js is a library for creating slides in the Web based on vue.js, supporting animation, themes, interactive plug-ins and other common functions. (github.com/zulko/eagle…).

  • React-perimeter: The perimeter allows you to create hidden fences for target elements that trigger preset times when the user’s mouse moves within a certain range of the target element, such as component preloading. (github.com/aweary/reac…).

The peak of life

  • Six Questions CTO, how to choose programmer’s personal and professional growth? : This article is written by Tao Siming, CTO of Agora. IO, to answer and share questions about programmer self-growth, KPI assessment mechanism, technology management and entrepreneurial choice. ( parg.co/bQp)