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

  • Chrome to mark all HTTP Sites as insecure: Google Chrome has announced that it will begin marking all HTTP sites as insecure in Chrome 68, which will be released around July 2018. The move could also mark the end of non-HTTPS sites. With the latest version of Lighthouse Node.js, developers can use the command line tool to detect the presence of HTTP-based resources on a site and automatically determine whether the corresponding HTTPS version is available.

  • Rollup support for code splitting: The JavaScript module packaging tool Rollup has finally introduced code splitting, a long-awaited feature, in its 0.55 release. Rollup has long been the preferred tool for libraries like React, Vue, D3, Moment, three.js, Ember, Angular, Babylon, Jest, Bootstrap, Leaflet, Prettier, The addition of this feature means that it is becoming a candidate for packaging tools.

  • Microsoft Edge further embraces PWA with Windows 10: Edge 17 will have Service Workers and Push Notifications built in, and Microsoft Store will treat manually submitted PWA as native apps. This article is an introduction to PWA by the Microsoft Edge technology team, a vision of the problems it can solve, and how to ensure PWA performance in Windows 10 in the future.

Development tutorial

Step by step, master the basics

  • React 16.3 new features: React 16.3-Alpha is available in NPMJS and can be incorporated into projects. This article introduces the new features in React 16.3. This release introduces a new Context API that allows developers to generate two associated components using React. CreateContext (); Reconstructed the lifecycle callback, abolishing the componentWillMount, componentWillUpdate, componentWillReceiveProps, introduces getDerivedStateFromProps; StrictMode is provided to ensure code conforms to best practices; Update React Developer Tools, etc. See React Reference for more information.

  • Introduction and use of Service Workers: Service workers can be regarded as the core component of Progressive Web Apps, providing resource caching and notification push functions, which is one of the current differences between Web applications and native applications. This paper will include the basic concept and use of Service Worker, and specifically discuss background processing, offline support, resource prefetching, network request caching, installation and basic use, etc. Refer to the PWA Reference for more information.

  • React’s ⚛️ new Context API: This article looks at the new Context API available in React 16.3, which consists of three parts: React. CreateContext allows you to enter initial values and returns objects containing providers and consumers. The Provider component is placed higher up in the component tree, allowing a property named value to be passed in, while the Consumer property can be placed anywhere in the component tree to receive the value argument by passing in a render callback function. Read more about React and Front-end engineering practices.

The engineering practice

Base on practice, prompt actual level

  • In this article, we’ll discuss how to get the best out of GraphQL without getting around its pitfalls. In this article, the author discusses the following: Schema duplication, Server/client data mismatch, Superfluous database calls, Poor performance and Boilerplate overdose. For each problem, the author first describes it and then describes how to locate and solve it during the development of Vulcan. See the GraphQL Reference for more information.

  • Redux modules and Code Splitting: Twitter Lite has been using Redux as its state management framework and is constantly looking for modules and code style solutions. While Redux’s default interface style is not geared towards continuous loading, this article shows how Twitter Lite supports progressive code loading with a sensible code style that has been tested in production for years. See the Web Development Basics and Engineering Practices series for more information.

  • Addy Osmani: Web Performance optimization with Webpack: Modern Web applications often use so-called build tools to create packages that are optimized and compressed for deployment to production to minimize user consumption. This article, a WebPack-based Web performance optimization tutorial by Addy Osmani, discusses how to use features such as code splitting to remove unused pieces of code and compress the package as much as possible to minimize network consumption and processing time. See the Web Development Basics and Engineering Practices/Performance Optimization series for more information.

Deep reading

Deep thinking, sublimation development wisdom

  • React Pattern evolution: This article will take an in-depth look at the popular architectural patterns in the React ecosystem that improve code readability, clarity, and composability and reusability. This article will introduce Conditional Render, Passing Down Props, Destructuring Props, Provider Pattern, High Order Components, Render Props, etc. Read more about React and Front-end engineering practices.

  • Front-end interview manual: Unlike the traditional technical interview for a software engineer, the interview for a front-end engineer may focus less on algorithms and more on interactivity and knowledge of HTML, CSS, and JavaScript. In this paper, the author searched all the existing interview manuals, but found no completely satisfactory, front-end related interview manual; Therefore, I wrote this article to share my knowledge accumulated in front-end work. This article can also be regarded as an answer to famous front-end Job Interview Questions. See Awesome Web Reference for more information.

  • How to train AI programs that can turn designs into HTML and CSS: As AI and deep learning technologies evolve, we can also expect them to gradually transform some areas of front-end development. AI can help us speed up prototyping and lower the barriers to building software. Over the past two years, with Tony Beltramelli’s Pix2Code Paper and Airbnb’s Open source Sketch2Code, we have been able to use AI step by step to help us build simple pages. Perhaps the biggest bottleneck in front-end development automation today is computing power, but that doesn’t stop us from learning about the underlying algorithms of deep learning, how to train data, and how to use models for interface transformations. In this article, the author takes the reader step by step to build a basic neural network that can convert a design draft into HTML and CSS code. See Awesome Web Reference for more.

  • In the era of mobile Internet, mobile user experience is particularly important for a Web site. The design and development of modern Web sites is mobile first, and we have optimized and improved the web site specifically for mobile. Any delay in this process will cause performance bottlenecks, reducing the possibility of users to continue access, so we have made a series of optimization work in the server side, browser side, network loading, and many other aspects.

The open source project

Willing to share, push forward the front-end development

  • Automerge: Automerge is jSON-like and can be used to build data structures that work with JavaScript applications. Its core feature is that it allows concurrent modification by multiple users and can be merged automatically. Currently, many JavaScript apps store state in a model like a JSON document. Automerge will ensure this consistency of use and offer extended functions like atomized synchronization and merging.

  • Winamp2-js: Winamp2-JS is a version of Winamp 2.9 using HTML5 and JavaScript, including the following features: dynamic skin support, support to load local skin files or resource files by drag and drop, support for custom action buttons, etc.

  • Rekit: Rekit is a complete tool set and solution for developing React, Redux, and React Router applications. Rekit starts with an all-inclusive editor that automates project construction and file layout, allowing developers to focus more on business logic rather than endless libraries, patterns, configuration files, and so on. Rekit provides an Opinionated architecture pattern that ensures scalability, testability, and maintainability through feature-oriented segmentation.

  • WebAssembly Studio: WebAssembly Studio is a workbench for learning, practicing, and running WebAssembly online. It provides a web-based IDE that allows users to compile WebAssembly from C++ or Rust. Users can also run the Studio locally by installing Node.js and Webpack and running it.

The peak of life

  • How N26 uses JavaScript to build a banking oriented microservice system: N26 is a German banking startup. Patrick Kua, CTO of N26, has spent 13 years at ThoughtWorks, where he has accumulated rich experience in software and successfully led a technical team to provide high-quality banking services to hundreds of thousands of users. In a conversational way, this article focuses on discussing how Patrick’s team chose languages and frameworks, how they handled testing, DevOps, and continuous integration, and how they deployed microservices and provided highly available services.

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