Vue2 reactive principle, RN run built-in Node, JS skillfully use Proxy anti-obfuscate, GraphQL pros and cons debate, deep into React animation

Author: King Invite moon bear editor: Xu ChuanCopy the code

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 endCopy the code

  • Storybook 3.2 release: Storybook allows us to quickly browse individual components in modern componentized development; In the recently released version of Storybook 3.2, support for vue.js was added. In addition, this version also introduces the hierarchical Story layout, allowing developers to define the presentation level of components more flexibly; It also allows you to view the React Native component directly on your mobile device and fixes some of the previous bugs.
  • Webpack set out to add first-class support to WebAssembly: Currently, Only JavaScript is treated as a first-class citizen in Webpack, and other resources (HTML, CSS, etc.) need to be converted to JavaScript expressions for processing; Webpack rendering recently partnered with the Mozilla Foundation and received $125,000 in funding from the MOSS Project. Webpack set out to add first-class support for WebAssembly, and we can also check out the latest progress in the Issue Tracker.
  • Webkit sets out to develop PWA feature support: Progressive Web Applications (PWAs) create Service workers to enable Web users to enjoy the features of native Applications such as push and offline support, which is an important part of modern Web development. Unfortunately, Safari hasn’t supported pWAS-related features, which has upset many developers, There is a lot of discussion in this article about Apple’s Reflection to Support Progressive Web Apps is a DETRIMent to future of the Web; However, some developers have recently found PWA content on Webkit’s BugList and Changelog, and although it may be a few months or longer, we believe Safari will provide better support for PWA in the future.
  • TensorFire: WebGL-based browser-side high-performance Neural network Framework: Deep learning and artificial intelligence technologies are gradually changing people’s lives, and a series of deep learning and neural network frameworks represented by TensoFlow are also in the peak of development. TensorFire is a WebGL-based neural network framework that runs in a browser. Applications written using TensorFire can implement cutting-edge deep learning algorithms while running directly in modern browsers without any installation or configuration.

Development tutorial

Step by step, master the basicsCopy the code

  • Vue. Js and NativeScript The NativeScript framework is best known for its extensibility. It currently supports native JavaScript, Angular, vue.js and other frameworks or encoding methods, and plans to support Preact in the future. This article introduces how to use NativeScript and vue.js to develop together. It first introduces how to use the NativeScript command line tool to create a project, then introduces the vue.js plug-in and how to run the project. For more information on vue.js, see https://parg.co/byL.
  • Node.js practical tutorial: This tutorial is intended to be based on some well-known modules/functions, and explain various knowledge points in the implementation process, mainly divided into control flow, Web, storage, etc. Currently completed modules include async introduction, Promise implementation, Coroutine implementation, CO module introduction, HTTP Client implementation, HTTP Server implementation, etc. See parg.co/be0 for more node.js documentation.
  • Airbnb React VR Practice: Airbnb has been using React to build user interface since 2014, and has contributed many excellent open source projects to the community; With React VR’s launch, Airbnb is also using it to quickly prototype ideas related to testing VR. This paper introduces some experience summary of Airbnb’s React VR practice. This paper first explains the relationship and differences among React, React Native and React VR, and then introduces syntax of React VR in layout and basic components. Finally, React VR, WebVR and the development possibility of VR technology itself are discussed. For more information on WebVR, see WxYYXC1992 / coder-knowledge-Management.
  • Break through CSS front-end interview: different from traditional software engineer interview which focuses on algorithms, front-end interview may pay more attention to comprehensive ability and domain language mastery; This article focuses on the summary and introduction of common CSS questions in interviews. This paper presents issues such as the difference between Resetting and Normalizing, how floats work, comparison of Z-index and stacking Context, BFC description, etc. For more CSS/SCSS documents, see https://parg.co/baH.

The engineering practice

Base on practice, prompt actual levelCopy the code

  • Angular Performance optimization: This article introduces some common Angular development performance tuning recommendations, Including the use of ChangeDetectionStrategy. OnPush to explicitly declared between components rely on, using trackBy to track a unique identifier and avoid redundant add or delete, avoid in the template deduction, disable change monitoring, use lazy loading, etc.
  • Vue.js 2 Unit Test Guide: This article describes how to build a complete unit test for vue.js 2 using Jasmine. Jasmine was chosen because of its superior performance and vue.js uses the testing framework itself. This paper first introduces the environment construction and components to be tested, and then introduces the configuration of the test environment, how to select test points according to the business function logic of components, how to write test cases with different objectives, etc. For more information on vue.js, see https://parg.co/byL.
  • React animation practice: This article describes various ways to create animation effects in React development. It includes CSS animation based on React component state, JavaScript style animation based on React component state, and third-party libraries such as React Motion, Animated, and Velocity-React. Finally, how to use GreenSock and other classic and powerful animation library to assist React component animation development is discussed. Learn more about React at https://parg.co/bM1.
  • How does Node.js parse Form uploads? The open source components on NPM and GitHub help us with a lot of tedious work, but they also cost us a lot of opportunities to dive into technical details. When existing components don’t meet our needs, it’s up to us to make our own food and clothing. Some time ago, I encountered an opportunity to manually parse the Form upload. I also took this opportunity to parse the implementation details of Node.js parse the Form upload for you. See parg.co/be0 for more node.js documentation.

Deep reading

Deep thinking, sublimation development wisdomCopy the code

  • Interesting and dumb examples of JavaScript: JavaScript is a fun language, with its simple syntax, large ecosystem and community, but there are a lot of things in JavaScript that make you wonder. This article is just a collection of some interesting and unexpected uses of JavaScript, which is a great in-depth tutorial for beginners and an interview topic for experienced developers. Examples included in this article are [] ==! [], NaN usage notice, try-finally, etc. See Parg.co /bMI for more JavaScript related materials.
  • REST in peace REST APIs, GraphQL lives on: GraphQL is Facebook’s open source data query language for data acquisition and operation of complex relationships. This paper compares the advantages and disadvantages of traditional REST APIs and GraphQL, and discusses the application scenarios where GraphQL is better than REST APIs. However, this article does not advocate the use of GraphQL to completely replace REST APIs, but also states the limitations and shortcomings of GraphQL. This paper first summarizes the three problems solved by GraphQL, then introduces the origin of GraphQL and its internal principles, and finally discusses the cost of GraphQL’s flexibility. For more information on GraphQL, see Parg.co /b1e.
  • PopUnder library based on Proxy anti obfuscation: This video through a commercial Chrome 59 PopUnder library, the execution process analysis, to introduce how to use ES6 Proxy, simple JavaScript obfuscation code reverse crack. The video is quite interesting. The author first analyzes the source code after confusion, and finds it impossible to start; Then use Proxy to listen to common Windows createElement function calls to understand the library execution process, and finally according to the API call sequence to reproduce the library. For more JavaScript design patterns, see https://parg.co/bIO.
  • In this article, the author takes the classic Getters/Setters from Java and C# and discusses the triggering of the entire life flow in vue.js from component rendering functions, data Getters, Setter hijacking, listener control, and rerendering. For more information on vue.js, see https://parg.co/byL.

The open source project

Willing to share, push forward the front-end developmentCopy the code

  • Hazel: Hazel is Zeit’s lightweight Electron application update server that supports simultaneous updates of macOS and Windows applications. Hazel is built on a micro library and can automatically extract data from Github and cache it in memory, automatically refreshing the data every 15 minutes.
  • React Native Node: The React Native Node can start the background Node.js process in an Android application developed based on React Native, so that it can use the features of Node.js such as streams and file system interfaces to perform functional operations. React Native nodes can be independently compiled into bin_node_v710 executables depending on Node.js 7.1.0. On the other hand, although iOS does not support running V8 directly, the project is working on creating v8-like feature support for ChakraCore.
  • React-simple-maps: React-simple-maps is the react map component library based on D3-GEO and TopoJSON, allowing developers to quickly and easily build custom SVG maps. Current features include zooming, tagging, custom SVG markup, custom coloring, bubble graphs, animation support, and more.
  • Vuestic Admin Dashboard: a responsive management console based on vuue. js and BootStrap 4, consisting of 36 elements, 18 pages, 18 custom ICONS, etc. Chart.js is used to build responsive ICONS, and Leaflet and amMap are used to build visual map components.

The peak of life

  • Equity, options have what pit? From the perspective of technology entrepreneurship: This article is edited from the GTLC Global Leadership Summit speech by Yang Jilong, CTO and COO of Know Chuangyu. This article shares the pits experienced in entrepreneurship and how to deal with them from the aspects of equity allocation, option allocation, investment and financing as well as the insistence of 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 send email to [email protected], marked “Top of the front submission”; Or you can read previous articles:

  • A weekly list of front-end listings for Web front-end starters with engineering practices.
  • React 16 exception handling with Fiber, Vue diagrams with jQuery plugins, V8 Turbofan performance optimization
  • React and GraphQL development Guide and performance optimization, vue.js 2.4.0 release