Author: King Invite moon bear editor: Xu Chuan
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
-
WebVR support for Firefox 55: Firefox 55 for Windows is the first desktop browser to support the new WebVR standard. Mozilla hopes this will drive WebVR further. Firefox 55 also supports many ES2017/2018 features, including Async generators, and further improves browser performance and security. See the original article for detailed feature description.
-
Google open Source JavaScript machine learning library deeplearn.js: Deeplearn.js, Google’s open source hardware-accelerated machine learning JavaScript library, provides efficient machine learning building blocks that allow us to train neural networks in a browser or run pre-trained models in inference mode. It provides an API for building a differentiable data flow graph, as well as a series of straightforward mathematical functions.
-
Next. Js is a zero-configuration, single-command tool chain for quickly creating React applications with built-in support for server-side rendering, code splitting, and other features. In version 3.0, Next. Js introduced static export, which allows you to export Next. Dynamic import support has been added to allow dynamic import of external dependencies and React components.
-
Node.js 8.3.0 launches with Ignition and TurboFan streams: Ignition and TurboFan, the new interpreters and compilers available in V8 5.9 that replace full-CodeGen and crankshafts from 2010, can be read to learn about the huge performance improvements that the new execution stream will bring. The new version brings significant performance improvements to Node.js, but it also fixes some bugs in the 8.x series. See the original article for a full list of features and updates.
-
Angular 5 and Progressive Web Apps: The Angular 5 release in September will be the first Google-powered Progressive Web Apps framework. Features in Angular 5 include: Built-in Progressive Web Apps support, build optimizer to remove redundant code, compact application size, integrated Material Design components in server-side rendering, and more. This article also provides a brief overview of the Angular 6 development plan and an analysis of Angular’s strengths, including dependency injection and the HTML template engine.
Development tutorial
Step by step, master the basics
-
Building a Full-stack JavaScript Web Application in three weeks: This article documented how a beginner programmer built a full-stack javascript-based e-commerce application from scratch in three weeks, step-by-step. This article starts with the initial product design and prototype diagram construction, then describes how to choose the right data structure and database. Next, it introduces how to create Github warehouse and use agile development process. Finally, it introduces how to use Express and Firebase to build server, and use React and Victory.js to build front-end applications. See Modern JavaScript Development: Syntactic Basics and Practical Tips for more JavaScript related learning.
-
GraphQL is an interface oriented query language developed by Facebook, which can make up for the shortcomings of REST API. This article introduces how to cooperate with vue. js and GraphQL to develop isomorphic applications. This article describes how to set up a basic GraphQL server, then discusses how to introduce vue-Apollo, ApolloClient and other dependencies in vue.js project and create a simple GraphQL client instance. At last, it introduces how to use the convenient instruction provided by graphQL-tag in vue. js component to realize the data query of foreground and background quickly. See here for more information on GraphQL.
-
Using Node.js to build API Gateway: With the increase of modern business complexity, the concept of microservices is getting more practice; As an important part of the microservices architecture, THE API Gateway provides a uniform authorization verification and client-protocol compliant abstraction layer for all back-end services. This paper first introduces the concept of microservice infrastructure and API Gateway, and then introduces the composition of Node.js API Gateway for the front-end team. Next, the basic functional requirements of API Gateway are analyzed in detail: routing and version, iterative design, permission check, data aggregation, data serialization and deserialization, stream limiting and caching, etc. Finally, the implementation of API Gateway based on Express is discussed. For more node.js information, see here.
-
VasSonic is a lightweight, high-performance hybrid framework developed by Tencent VAS team to speed up the first screen loading of websites on Android and iOS platforms. VasSonic not only optimizes static or dynamic Web sites rendered by servers, but also optimizes Web cache resources. VasSonic uses a custom URL connection to request the Index interface instead of a network connection, so it can request resources ahead of time or concurrently, avoiding extra user wait time. For more information and features, see the original version.
The engineering practice
Base on practice, prompt actual level
-
Using ES Modules in Node.js development with STD/ESM: As mainstream browsers gradually support ES Modules standard, more and more attention is paid to the implementation of EsM support in Node.js; Node.js plans to introduce built-in ESM support in the 9.x release in 2020. The recently released @std/ ESM provides us with a high performance node.js CommonJS and ES Modules call, which can work on node.js 4.x and above; It smoothly integrates into the existing Webpack, Babel environment and supports different dependency versions for different modules. Unlike current solutions, which require publishing compiled CommonJS files, @std/ ESM can convert source code with minimal cost, on-demand conversion, and dynamic caching. For more node.js information, see here.
-
Components have been part of Angular since version 5 of AngularJS. They provide a convenient way to organize and recycle code. Angular (short for Angular2) is more of a “sequel” than an upgrade to Angular 1.x, completely rewritten with mobile support and other features. Here, the controller used in 1.x is completely replaced by components. Whether you’ve ever used 1.x or want to stick with it, you need to start using components to make sure your code is as elegant and timeless as possible, whether you’re learning from scratch or in the transition phase. Regardless of which category you fall into, there are many things you can find here to help simplify the process.
-
Style encapsulation based on Shadow DOM: Shadow DOM is an important part of the Web Components standard, which can isolate and encapsulate DOM trees. This article introduces how to use Shadow DOM to implement isolated encapsulation for style classes. Because CSS does not provide built-in modularity or scoping mechanisms, and styles can easily conflict between components in large projects, we need to choose the appropriate CSS style isolation scheme. At present, the commonly used isolation schemes include BEM naming strategy, IFrame, CSS Modules, CSS-in-JS, etc. This paper firstly reviews the advantages and disadvantages of these schemes. We then introduced the fundamentals of Shadow DOM and how to apply it to style encapsulation. More CSS/SCSS related materials are available here.
-
Headless Chrome crawler defense: Headless Chrome provides us with a convenient way to operate the browser automatically, and it is also convenient for us to build crawlers oriented to dynamic web pages. A post on Hacker News a few days ago on how to Detect Headless Chrome detailed the methods available to tell if it is Headless Chrome, and this article discusses how to counter these detection schemes. The solutions include User Agent detection can be customized at startup, language and plug-in detection can be inserted scripts to dynamically modify language and plugins attributes, and WebGL Vendor and Renderer can Hook Parameter calls, file descriptors can be modified for Broken Image, and so on.
-
WebAssembly practices in PSPDFKIT: As the WebAssembly Community Group agreed on a standard in March, more and more major browsers are starting to support WebAssembly, In this article, PSPDFKIT, the developer of PDF tools, introduces their practical experience in developing browser-side rendered PDS preview tools using WebAssembly. This paper first introduces the working principle and compilation mechanism of ASM.js, and then explains the concept and composition of WebAssembly. Finally, it introduces the practical experience of WebAssembly in PSPDFKit and their experience in converting the original large C++ code base into WebAssembly format. More information about WebAssembly can be found here.
Deep reading
Deep thinking, sublimation development wisdom
-
React Whole family: graphite document big front end technology selection share: technology selection is a big topic. For startups, in order to adapt to the pace of business, “flexibility” and “high development efficiency” are the two most important points in technology selection. These are two of the problems that have been most addressed by new technologies emerging during the boom years of front-end technology. However graphite as a document with a lot of rich front-end application of enterprise users, complex forms, documents, and offline synchronization logic makes us for front-end technology stack engineering and requires a high degree of stability, considering too much new technology often ecology is not yet perfect and related “best practice” lack of validation, our choice of these technologies is relatively cautious. All the technical selection of graphite document front-end team is also considered around the above two points; Learn more about React here.
-
Native application development based on Vue.js: Weex vs. NativeScript: Vue.js has a smoother learning curve than React and Angular, but there is no built-in app development solution like React Native. However, both Weex and NativeScript can make up for this temporary shortfall in vue.js. The weekly list has also featured articles co-developed by NativeScript and vue.js in previous installments. This article compares the advantages and disadvantages of Weex and NativeScript application in native development. More information about vue.js can be found here.
-
The Node.js permission verification guide you may see has an error: Permissions validation is a standard part of almost every server-side application, and the author of this article has compiled this article as a warning to other developers while searching for permission validation tutorials for learning Node.js/express.js, most of which are somewhat problematic. Common misunderstandings may include the way credentials are stored, password reset strategy, GENERATION and verification of API Tokens, and flow limiting. For more node.js information, see here.
-
High performance Web animation and Interaction: Reaching 60 PFS: Providing a smooth interaction and animation experience for users is one of the challenges of most Web applications, and many developers focus on reducing the first screen load time while forgetting to optimize the rest of the user interaction. In this article, engineers from Algolia introduce their experience and skills in building high performance Web animation and interaction. This article first introduces common performance evaluation criteria and browser rendering process, layout, drawing, composition and so on. Next, this paper introduces how to make full use of opacity and transform properties to reduce animation consumption, how to force enhancement, and how to optimize animation-related code.
The open source project
Willing to share, push forward the front-end development
-
Nano ID: Nano ID is a lightweight, URL-enabled JavaScript unique ID generator that uses a randomised API with strong password encryption to ensure even distribution of generated symbols.
-
Resonance: Resonance is a data-driven high-performance React animation library that uses D3-Timer to manage hundreds of state changes; Resonance allows developers to implement high performance status update animations with simple and gracious syntax.
-
Atlassian Atlassian Atlassian Atlassian Atlassian Atlassian Atlassian Atlassian Atlassian Atlassian Atlassian Atlassian Atlassian Atlassian Atlassian Atlassian The most popular React drag library, React-DND, provides relatively low-level drag API support, while react-beautiful-DND provides high-level encapsulation for vertical lists. React-beautiful-dnd is still in iterative development, and I look forward to seeing more features in the future.
-
Notifme-sdk: NotifME-SDK is a Node.js library for simplifying notification sending process, which allows us to flexibly integrate mail, SMS, push, WebPush and other different channels to send notifications. Notifme-sdk also allows free registration of service providers, built-in Fallback and polling mechanisms for simple fault tolerance, and NotifME-SDK provides a simple UI console for interface only monitoring.
The peak of life
- How to become a qualified technical Leader? : InfoQ had an exclusive interview with Zhang Can, director of Baidu Takeout R&d center, ahead of his presentation “Lean In: The Rebirth of Young Technology Managers” at the upcoming QCon in Shanghai in October. Let Teacher Zhang Can talk about the growth of female technologists and their thoughts on the transformation of technologists to managers. This article is compiled from the interview.
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 and engineering practices;
- Vue2 response principle, RN run built-in Node, JS skillfully use Proxy to anti-obfuscate, GraphQL debate, deep into React animation;
- React 16 exception handling with Fiber, Vue diagrams with jQuery plugins, V8 Turbofan performance optimization.
