Angular 4.1 supports TypeScript 2.3, Vue 2.3 optimizes server rendering, and React interface frameworks. 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.

Angular 4.1 supports TypeScript 2.3, Vue 2.3 optimized server rendering, and A collection of excellent React interface frameworks

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

  • Airbnb Design team releases React SketchAPP: The Airbnb design team has released an open source tool for rendering React components into Sketch documents, which provides an easy bridge between developers and designers. ( airbnb.design/painting… )

  • Vue.js 2.3.0 JoJo’s Bizarre Adventure released: Vue.js has released its 2.3.0 version, with a slew of performance improvements and Bug fixes. This release has been optimized for server rendering, asynchronous components and other important parts. It is worth mentioning that a new Vue based server rendering implementation guide has been created. (github.com/vuejs/vue/….).

  • “Stanford announces JavaScript as preferred language for computer courses” : A Stanford professor who has been teaching Java for 15 years has decided to forgo Java in favor of JavaScript for his introductory computer course. The Stanford website describes its new 106J course as: “JavaScript is the most popular development language for building the interactive Web, and this course will use JavaScript to illustrate examples in CS106A. ( parg.co/bNX )

  • Flow 0.45.0 release: The latest release of Flow 0.45.0 introduces a number of new features, such as support for Unicode characters and import expressions. At the same time, Flow also fixes some errors and optimizes the efficiency of the code. (github.com/facebook/f….).

  • Angular 4.1.0 release: The latest Angular 4.1.0 release adds full support for TypeScript 2.2 and 2.3. In addition, this release adds a number of new features and fixes many bugs. ( angularjs.blogspot.com… )

Development tutorial

Step by step, master the basics

  • “How to Use ESLint in Node.js Applications” : ESLint is an open source JavaScript Linting tool that helps developers solve some of the bugs that come with JavaScript’s untyped language. ESLint follows the idea of componentization, which allows developers to dynamically set rules to use, and this article introduces the basic setup and use of the ESLint environment. ( parg.co/bN4 )

  • Learn Node.js in 8 Hours: Node.js is a JavaScript framework based on Google Chrome V8 engine that can be used to develop IO intensive Web projects such as live video and single-page applications. This article provides a complete node.js learning roadmap from zero to one, covering basic environment construction, Console use, core module use, basic Web server setup, and more. ( parg.co/bNy )

  • SSH Behind the Scenes: SSH is one of the most commonly used protocols, and this article documents the story behind how SSH got its default port number 22. In addition, this article documents the basic setup and use of SSH and how to work with iptables. ( SSH Port )

  • Css-in-javascript: Component-based Style Organization: By using inline styles, we can take advantage of the programmability of JavaScript to organize style code. It can help us with things like CSS preprocessors, namespaces, and more. This article introduces several common scenarios that are suitable for CSS-IN-JS, such as typography and whitespace. ( parg.co/bNe )

  • What You Should Know about Debugging Angular Apps: Debugging is an integral part of Web development, especially for developers who take over an existing code base and do a lot of debugging to understand the architecture and logic of the code. There is no official Angular documentation for debugging in Angular, but this article will give you an in-depth look at debugging techniques in Angular application development. This article first introduces the author’s techniques for debugging the source code, and then shows you how to use the framework’s built-in debugging API for application debugging. ( parg.co/bN1)

  • CSS Grid Layout Experience: CSS Grid layout has become very popular recently, attracting the attention of many developers. The latest versions of Firefox, Chrome, Opera, and Safari all add support for CSS Grid. This article focuses on what A CSS Grid layout is, what it can do, and how it can be put into production. ( parg.co/bNW )

The engineering practice

Base on practice, prompt actual level

  • Good React Interface Frameworks: This article lists several good React interface frameworks and analyzes their features, application scenarios, and potential pitfalls. Frameworks covered in this article include Material UI, React Desktop, Semantic-UI-React, Ant-Design, Blueprint, React Bootstrap, React Toolbox, Grommet, and Fabric And so on. ( parg.co/bNh )

  • Migrating from Restful JSON apis to Type-safe Web apis using GRPC-Web: Currently in Web development, REST + JSON is the standard way for Web applications to interact with API servers. However, this lack of strong typing constraints and more convention-oriented communication tends to make network debugging relatively complex. This article shows how to extend gRPC and use TypeScript to design interaction protocols between multiple microservices in a new system. ( parg.co/bNf )

  • “Actual Vue SSR Rendering Performance: Avoid 20 times time” : Vue SSR is a direct rendering scheme introduced in Vue. Js 2.0. This paper will comprehensively analyze the principles of Virtual-DOM-based and String-based and compare them. The template of Vue SSR is virtual-DOM-based, so when Qzone Hybrid makes Vue 2.0 transformation, the template type is also changed from the previous class A to class B. In this paper, the rendering performance of Vue SSR is tested in the actual business scene, and the rendering steps are analyzed, and the optimization scheme and final conclusion are given. ( parg.co/bNv )

  • “Building A Simple Neural Network from Scratch in JavaScript” : This is not a purely front-end development article, but should be read by interested developers who have heard of ARTIFICIAL intelligence and neural networks. This paper introduces neural network and deep learning theory foundation, how to use JavaScript to realize simple mathematical formula, how to realize simple neural network and so on. ( parg.co/bNa )

  • React Optimization Recommendations from Vixlet: In recent years, Vixlet’s Web team has gradually migrated its Web framework to React + Redux technology architecture. This article is a summary of Vixlet’s React optimization practices and recommendations. ( parg.co/bNF )

Deep reading

Deep thinking, sublimation development wisdom

  • “Careful use of CSS in JavaScript for Web Development” : CSS is flawed, but many projects choose to use CSS-in-javascript to organize their styles, but there are many misunderstandings about CSS and CSS-in-JS. Using Styled Component as an example, this article lists nine common misconceptions, such as using CSS-in-JS to resolve namespace conflicts, ensure style extensibility, improve performance and style file organization, and so on. ( parg.co/bNR )

  • D3. express: Integrated Interactive Coding Environment: This article introduces d3.express, an interactive coding environment similar to Python Juypter Notebook, which is still under development. D3. express allows developers to use a number of D3 built-in functions, such as loading remote CSV files; It also allows developers to interactively preview the results of SVG, Canvas, etc., in real time. Some believe that D3. express is a better JavaScript based data visualization solution. ( parg.co/bNi )

  • V8 No longer uses Benchmark Engine Octane: the JavaScript benchmark engine is an evolving history. As web pages move from static pages to rich client applications, benchmark engines need to keep up with The Times. SunSpider was one of the earlier benchmarking engines and provided a foundation for quickly optimizing JavaScript. However, as virtual machine developers realized the limitations of microbenchmarks, the benchmark engine was updated to optimize for SunSpider’s weaknesses, and the browser community removed SunSpider from the recommended benchmark engine. The Octane benchmark suite was first released in 2012 to mitigate some of the shortcomings of earlier microbenchmark engines. It grew out of V8’s early simple test cases and eventually became a benchmark for general web page performance. Octane contains 17 different test sets to cover a variety of different working scenarios. The content of Octane represents the dominant way to measure JavaScript performance when it was created. ( parg.co/bN9 )

  • “Search Engine optimization” : SEO is an important part of the website promotion process. This paper is a deconstruction of The Google recommendation algorithm for SEO novicies or veteran birds, a detailed analysis of the considerations of The Google recommendation algorithm, and gives practical suggestions on how to optimize the site SEO. ( parg.co/bNI )

  • “Modern Front-end Application Development from a Pragmatic Perspective” : Modern Web development technology changes rapidly, and I have experienced a series of changes from pure JS, jQuery, Vaadin, Angular JS, React, and so on. This article first considers what modern Web applications are, then considers the common project architectures and construction methods of modern Web applications, such as TypeScript, Webpack, Linting, etc., and then discusses the common technical architectures of modern Web applications, such as React. J, MobX, dependency injection and other relevant knowledge. ( dimafeng.com/2017/04/2.. …).

The open source project

Willing to share, push forward the front-end development

  • Sizzy: Sizzy is a tool to help developers preview how a page will look at different screen resolutions. It lists how a targeted page will look on multiple devices on the same page, speeding up responsive development. ( github.com/kitze/sizzy )

  • Create-next-app: a command line aid for quickly creating server-side renderings of React applications, similar to create-react-app, based on next. ( open.segment.com/crea… )

  • Fathom: Fathom is Firefox’s open source JavaScript framework for extracting meaningful content from web pages. It can effectively recognize forward/back buttons, address forms, main text content, and more. (github.com/mozilla/fa….).

  • Tamperchrome: Tamper Chrome is a Chrome extension that allows you to intercept and modify HTTP requests in real time. It can be used for Web security testing, and it runs on a variety of operating systems, including Chrome OS. (github.com/google/tam….).

  • PKG: PKG packages Node.js projects as a single executable, allowing developers to publish commercial-grade applications without the risk of source code leakage. PKG will automatically scan your node_modules and package the local content needed into an executable. ( github.com/zeit/pkg )