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

  • Angular 5.1 Release: This article introduces feature changes to Angular 5.1.0, Angular CLI 1.6, and the first stable release of Angular Material. Angular 5.1.0 includes several small feature changes and bug fixes, This series of updates includes stable Angular Material & CDK releases, CLI tool support for Service workers, enhancements to Universal and AppShell support, decorator error message optimization, and TypeScript support 2.5 and so on.

  • Ant Design 3.0 release: Ant Design is a Design solution and implementation for enterprise desktop applications. Fourteen months after version 2.0, version 3.0 was released with over 4,000 submissions from over 200 contributors. Ant Design version 3.0 introduces a new color system that is inspired by the sky, including a beautiful palette of twilight, sunrise, dawn blue, and more. The release also introduces new component designs, including multiple component clones, full support for React 16 and ES Modules, and optimized TypeScript support.

  • Font Awesome 5 launched: Font Awesome 5.0.0 launched this week, bringing us a new home page with over 900 free ICONS and over 1,000 commercial ICONS. There are many ways to integrate in 5.0. The most recommended way is to use JavaScript in conjunction with SVG ICONS instead of font ICONS to improve performance and ease of use.

  • TensorFlow Lite supports Core ML: TensorFlow Lite, a lightweight version of TensorFlow for mobile and embedded devices, has announced support for Core ML, a tool that converts TensorFlow models to Core ML formats such as.mlMode. Core ML is a built-in machine learning framework for iOS, which means iOS developers can deploy TensorFlow modules on Core ML. It is also an important step towards cross-platform support for TensorFlow Lite. On the other hand, Apple has opened source Turi Create, a custom machine learning model framework, to help developers quickly develop machine learning modules and integrate them into iOS applications.

Development tutorial

Step by step, master the basics

  • Developing webAssembly-based games with Rust: A few weeks ago, Alex Crichton’s PR enabled Rust to be compiled directly into WebAssembly format, and this writer has also tried Rocket, a board game written by Rust and Piston, To a WebAssembly format application that can run in a browser. The author uses JavaScript to handle user input and output and interface rendering, and Rust to handle game logic. The author introduces several Link errors that he encountered during the migration process and how to handle them, and then discusses how Rust and JavaScript call each other to render images and receive user input and output. More information about WebAssembly can be found here.

  • Change: non-GIF GIF GIF implementation: Images are an indispensable part of modern web applications. GIFs is one of the choices for implementing GIFs, but its quality and performance have been unsatisfactory. If you use the video tag directly, and it does not play the role of preloaded, you must segment the request. Safari Technology Preview allows developers to use it<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2017/12/11/16044d045762c64d~tplv-t2oaga2asx-image.im age">In the form of simple GIF requirements, compared to the original GIF solution can bring nearly twenty times the performance improvement, and support CSS background playback, its volume has been greatly reduced. For more information on image processing and performance optimizationhere.

  • Creating a Markdown application using Electron and React: This article provides a step-by-step guide to building a simple Markdown application using Electron and React, named Mook by the authors. This paper introduces the selection and consideration of technology stack, development environment, construction process and template application construction, main function development and so on. For more information on Electron study, see here.

The engineering practice

Base on practice, prompt actual level

  • Airbnb has used React Router and Hypernova to transform the core ordering process into a single page application rendered by the server. This article introduces how to transform the list details page into a single page application and comprehensively improve its performance. This article first discusses how to perform performance measurement. This article also introduces how to use Chrome DevTools to debug React performance issues. Then it introduces the optimization techniques in initial rendering, scrolling optimization, click feedback, input and output. See React and Front-end engineering practices for more React tutorials.

  • CQRS, ES, Onion: This article describes how to develop Node.js applications using CQRS and Event Sourcing patterns, organize these patterns using the Onion architecture, and use TypeScript for static type validation. This article first discusses what a flexible architecture is: separation of business logic from implementation, independence from databases, frameworks, services, and so on. Then it introduces the meaning of Event Sourcing and CQRS, and how they are organized in onion ring model. Finally, it discusses how to implement CQRS mode by taking typical authentication logic as an example. To learn more about Node.js, read the Full Stack architecture of Node.js.

  • Intersection Observer and SQIP incremental image loading When we look at content sites like Facebook, Pinterest, Medium, etc., we see that images are progressively loaded, with low-quality, blurry images coming first, and then the real thing, This article describes how to implement incremental loading using Intersection Observer and SQIP. In the previous listing we looked at SQIP Image PlaceHolder generation, which generates low-quality images in SVG format of less than 1KB; Intersection Observer, on the other hand, determines whether an image element is in the viewport to load on demand. For more information on image manipulation and performance optimization, see here.

Deep reading

Deep thinking, sublimation development wisdom

  • Orinoco: Young generation garbage collection in V8: JavaScript objects from the V8 engine are allocated on the heap and managed for the life cycle by the V8 garbage collector; In this article, Parallel Scavenger, one of Orinoco’s latest features, is introduced for garbage collection targeting younger generations. In this paper, the generational garbage collection model is introduced, the single-threaded Cheney’s Semispace Copy algorithm is discussed, and the design of the Parallel mark-evacuate and Parallel Scavenge are discussed. More V8 related references are available here.

  • In advance of the results of the 2017 STATE of JavaScript survey, Sacha Greif talked to several experts about their views and reviews of JavaScript development in 2017 to compile this post. This article discusses several different aspects of testing tools, build tools, state management, full stack architecture, and shares some impressive technologies from 2017. In addition, A recap of front-end Development in 2017 is also A good summary, more JavaScript related materials refer to here.

  • Guidelines for Improving Web Content Usability: The Web Content Accessibility Guidelines 2.0, published by the World Wide Web Consortium (W3C), are an excellent guide for Web Content usability that can help designers and developers improve the overall usability of Web pages. This article is a brief summary of the guidelines to help developers who don’t have the time to read the original guidelines quickly learn about web usability. This paper discusses in turn how to judge whether the user can effectively accept the information in the web page, how to judge whether the user can effectively use the control button and jump link in the web page, whether the user can understand the web page content, whether the user has adapted to the complex user environment and so on. For more on Web development, read modern Web development engineering practices.

  • Cartoon Graphic JavaScript engine: This article introduces JavaScript from the perspective of the execution mechanism. The first article introduced asynchronous execution concepts such as Callback Queue and Event Loop. This article introduces JavaScript from the perspective of the engine. A comic introduction to the compilation, parsing, and execution of JavaScript. Last week’s list recommended speculative optimizations for the V8 engine. In this article, we introduce JIT compiler principles in a general way to give the reader a conceptual overview. For more information on JavaScript engines, see here.

The open source project

Willing to share, push forward the front-end development

  • Parcel: Parcel is a high-speed, zero-configuration Web application packaging tool. Designed for modern operating systems, it is capable of multi-core concurrent compilation and provides file system caching to optimize rebuild or incremental build performance. Parcel also offers out-of-box SUPPORT for JS, CSS, HTML, resource files, automatic code conversion using Babel, PostCSS,PostHTML, and built-in supportimport()Dynamic import vs. hot replace.

  • Electron Toolkit: The electron Toolkit is a lightweight and powerful startup aid tool for the electron application. It can be started in the form of an NPM script and provides developers with a series of auxiliary tools required during development. These tools include icon generation, screenshot tools, installers, binary file generation, website generation, live updates, and more.

  • Muuri: Muuri is a powerful JavaScript layout engine that incorporates features from Packery, Navigation, Isotope, and Sortable to help developers quickly build scalable table systems that are responsive, sorted, filtered, draggable, and animated.

  • Vuetron: Based on Electron, Vuetron is a tool for vue. js project testing and error detection. It also supports Vuex and VuE-Router. Similar to Developer Tools, Vuetron can view events, application status, and debug back in time. At the same time, it can monitor the changes of specified state variables, view API requests and responses, and visually view the component structure tree.

The peak of life

  • From hacking to entrepreneurship, he says that’s what tech startups should do! : This article is about Yang Jilong, CTO & COO of Chuangyu, who shared his insights on entrepreneurship and the pitfalls he has stepped on in Geek Live. Yang Jilong is a core member of the civil white Hat hacker organization focused on security. He was rated as one of the leading hackers of the new generation in China by Top of the Wave. In this article, he shares his definition of a hacker, how to become a security entrepreneur from a hacker, the pitfalls that tech entrepreneurs have stepped on, and his advice to tech entrepreneurs.

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