Pre-show tidbits

Here are some pictures of the venue

sign-in desk

The little sister who took the group photo (with the permission of the little sister)

The venue layout

Opening speech

By Huang Xitong, Tencent Cloud Technology Director

Main idea: Knowledge has a half-life, and the only way to gain security is to keep improving (wang Xing).

Guests to share

一, The Future of Writing Javascript

By Nicolas Bevacqua

For each new feature to be included in the ECMAScript specification, it must go through the process outlined in TC39, which consists of stages 0 to Stage 4

Stage 0: Strawman

Free form submission of ideas to advance the ECMAScript development phase by any TC39 member, or registered as a TC39 contributor.

Stage 1: the Proposal

The official commit phase of the feature

Stage 2: draft

The draft is the first version of the specification and will not differ significantly from the features contained in the final standard. After the draft, only incremental amendments are accepted in principle.

Stage 3: candidate

The candidate phase, which is nearing completion, requires concrete implementation and user feedback. Thereafter, changes will be made only if major problems arise in implementation and use.

Stage 4: finished

This feature is ready to appear in the annual release of the specification.

The future of JavaScript

  • NPM, a Javascript package management tool, beat Bower
  • Webpack, a JavaScript packaging tool, beat out gulp, require.js
  • Babel, JavaScript compiler
  • Rollup, the new generation of JavaScript packaging tool, is popular in class library development
  • Eslint, a JavaScript code quality check tool
  • Prettier, JavaScript’s next generation code quality check tool
  • Node, JavaScript V8 running environment
  • Electron, a JavaScript desktop application development tool

2. Front-end engineering system construction of start-up companies

By Zhang Yunlong (CTO)

1. Componentized development and system separation

  • Divide and conquer at the code level (don’t care what framework)
  • Static Resource Management (embedded, dependent, Location) Source code -> Build Tools -> Resource table -> Load interface (synchronous, asynchronous, preload)
  • Large website subsystem split broadcast business subsystem, public module subsystem, home business subsystem -> build a release version

2. Continuous integration, delivery, deployment

  • Use gitlab-ci (for example, a new feature branch will automatically generate feature-name.www.quanmin.tv test environment)
  • Implementation principle of multi-environment in front-end engineering a. Resolve Intranet generic domain names, and resolve *.www.quanmin.tv to Gitlab-Runner machines. B. Gitlab-ci generates nginx configuration files for push git branches c. Start nodeJS server, listen to this port d. nginx reverse proxy, and delegate the domain name to the corresponding APP port to achieve multi-environment effect

3. Front-end automated testing

  • 4 DOM differences (Add, delete, content change, style change)
  • Dolphin Automated Test system A. Page difference comparison based on Page-Monitor project B. Establish a case by setting dom baseline, compare dom differences between versions, and narrow the scope of manual testing c. Inherited behavior recording, log output diff, waterfall flow analysis of the first screen analysis and other useful functions

4. Kanban, visualize your progress (Physical Kanban is recommended)

  • Kanban principle: Visual display manages flow in production

  • Problems of electronic kanban: high cost of information radiation is easy to form [information refrigerator], lack of ritual sense and poor customization

  • Recommend a book – Kanban combat

5. To summarize

Entrepreneurship is not about reducing the number of mistakes, it’s about minimizing the cost of making them.

V8 performance optimizations for front-end developers

By fan crossing

1. How do dynamic languages do fast calculations

Representation of numbers in V8
  • 32-bit systems use INT30
  • 64-bit systems use INT31
Data types in V8
  • Object: 
    Array
Function
Date
RegExp
BooleanObject
StringObject
NumberObjectCopy the code
  • My: 
    Boolean String Number:Copy the code
    • Integer
    • Int32
    • Unit32
Compiler optimization
  • Use TypeFeedback for dynamic checking
  • In general, check ahead of time at compile time
  • After checking, use the type as a dynamic type
  • If the check fails, optimize
  • After de-tuning, the interpreter may be used to run intermediate code
The future direction
  • TypedArray
  • WebAssembly
  • SIMD

Iv. Guest address

By Winter cheng Shaofei, Alibaba front-end technology expert

1. About full stack

It’s not Nodejs, it’s full stack, it’s full stack in the production process, both the front and the back end should be taken into account.

2. Deep integration of front-end and client

The front end and the client side in the previous impression, are competing with each other, but I think the future front end and the client side will have a deep cooperation and integration. For example, Weex animation is very slow, we let the front end to throw an animation package to the client to achieve, this process we used two front end, three client engineers (including a client leader) to complete, after the effect is very good.

3. Ali’s Node

We want to do some middleware around Node and better serve the node-related ecosystem for ourselves and more developers.

These are the three main points winner would like to share, and the details are not the exact words.

Matinee notice

Since there are three sessions in the afternoon, the first two are from the first session (Web Frontiers) and the last two are from the third session

V. WebGL- Start a new chapter (The Exploration journey of WebGL & Three.js)

By Wan Bo

What can be done? (Interactive product display, realistic 3D scene, immersive website experience)

  1. Product display
  2. Brand and marketing websites
  3. Application (clothing matching, virtual decoration)
  4. The game
  5. WebVR webAR,

Some questions:

Is the project expensive to develop? (about twice as long as a 2D site) how does it perform? (Mobile is fine, desktop is fine.) How is the browser supported? (81.2% on desktop and 74.7% on mobile, but the support rate is increasing rapidly. According to the statistics of King of Glory devices, 95% of devices support WebGL)

What should I do?

  1. Start with the WebGL framework
    • Three.js
    • Babylon.js
    • PlayCanvas
  2. Basic concept of three scene
    • Scene: A three-dimensional container
    • Light: Allows objects to be seen
    • Material: The appearance of an object
    • Camera: You can see different faces from different angles
  3. Basic concepts of three-dimensional objects
    • geometry
    • The grid
    • surface
    • The vertices
  4. Three-digit software production process
    • Create a scenario
    • Add an object
    • Set the material
    • renders
  5. What can Three.js do?
    • Create geometry
    • Set various materials
    • Set up various types of lights
    • Create particle effects
    • Create WebVR
    • Rich animation types

The working principle of

  1. The working process
    • Vertex coordinates (Cache -> Matrix -> Coordinate Transformation -> Primitive Assembly -> Display)
    • Rasterize (generate tiles from vertices -> Rasterize)
  2. Process the process (process the creation process separately)
  3. We need a reserve of knowledge
    • Understand common 3D software
    • Learn Three. Js
    • Third Party Libraries
    • Learning WebGL
    • openGL ES
    • Linear algebra, computer graphics

Machine learning journey for a front-end engineer

By Yun Deng (2nd voice) (Architect of Medon Technology)

The front-end of the future

  1. Multiple input
  2. Vary from person to person
  3. Rich information hierarchy
  4. AR / VR

Five minutes to understand machine learning

  1. Machine learning is the process of making a computer find a solution without actually programming it.
  2. Traditional programming and machine learning
    • Find needs (machines, people)
    • Find the pattern of requirements (machine)
    • Validate requirements (machine)
    • Prepare data (people)
    • To run (a machine).
  3. Shallow learning (data need to be processed in advance, otherwise the effect is very poor)
  4. Deep learning (Biased over-fitting is easy to be produced when biased data appears, and the solution is to train with more data)

Our attempt

We want to know what font users like.

  1. The data collection
    • Log any action on the front end (in the case of WebSocket and HTTP2, so network stress is low)
    • The collection ratio of mobile terminal is relatively small
    • Format: plain text
    • Security (collected only with TSL certificate)
  2. Data processing, forecasting
    • Collated into feature data (CSV)
    • training
    • Providing predictive services (running a single piece of data for a few seconds is unacceptable to users, and can be a huge burden on the server when there are large numbers of users. To the front end)
  3. Open up forecasting to the front end
    • GPGPU with WebGL (Front-end GPU Computing)
    • Three networks (if the current two networks cannot predict, then use the last network) what network do you want (less biased nodes) what network do you not want (less biased nodes) full node network
  4. Put functionality into the front-end application
  5. Common functions and network structures
    • softmax
    • k-means
    • T-sne (Dimension reduction method)
    • CNN (dealing with computer vision)
    • RNN-LTSM
    • Deep Q Learning
    • Autoinput, Autooutput

  6. Some weird optimizations

    • Pre-training and combined networks
    • Regularization adjustment and network simplification

  7. The actual business

    • Semantic search
    • Function is recommended
    • Intelligent recommendation
    • Loss prevention & transformation
    • Automated compatibility testing
    • Intelligent creation

About creation, a computer network creates, a computer network decides whether it is human creation or machine creation, and then the two influence each other, and finally the more accurate the judgment becomes, the more creation becomes human.

Vii. Engineering Practice of FUtu (Components and Construction)

By Wang Yunguo (Front-end Development Engineer of Futu)

Historical issues

  • Difficult to maintain
  • The quality is
  • inefficient
  • Different interaction

Modularization and componentization

  • AMD Modular Specification
  • I18n plug-in
  • Standardization and flexibility

build

  • require.js
  • gulp

Question:

  • Build time (15-20 minutes)
  • Build out of control (heavily dependent on configuration files, build can go wrong)
  • Inefficient cache management (because the site has only one version number, all resources before each version are invalid)
  • Components are difficult to reuse across projects

The preliminary forming

  • Component project
  • Build change
    • Require.js -> webpack (supports specifying non-directory addressing)
    • Speed increase (1020s -> 300s, WebPack only packing, compression and increment implemented separately)
    • Implement the WebPack-AMDI18n plug-in yourself

The new problem

  • Build environment differences -> Using JenKins: Parameter resolution pull code installation dependencies build commit into the library
  • The unreliability of people
  • Developer’s Obsession

Component 2.0

  • Private NPM (registry.npm.oa.com)
  • Namespace @futuweb
  • Semver semantic version
  • Go to jQuery and adapt to multiple frameworks
  • Add the document

Looking forward to

  • Will there be component solutions or tools to accommodate multiple frameworks?
  • Will there be a solution comparable to client engineering?

Distributors want a unified tool for unified front-end development.

Decrypt real-time collaboration documents

By Xu Haihao (Graphite Document front End Team Leader)

Editor Introduction

  1. Rich text editor

    • Open source editors: UEditor, Simditor
    • Principle: Uses the ContentedItable features and the execCommand interface

  2. Rich text editor usage scenarios

    • Write long blog posts

  3. Defect:

    • HTML hierarchy presentation is not rigorous
    • Multiple users cannot edit the same version at the same time

How to satisfy multi-person collaboration?

Design a code-level Text model to represent the HTML content of the editor

HTML converts to model to store and process changes -> Data Data -> converts to HTML for display

Summary: Conditions that support collaboration

  1. The contents of the editor are converted to and from the Text Model
  2. The Text Model can handle multiple changes
Plan 1: Build the wheel from scratch

Principle: Listen for keyboard events to display content in canvas or other ways

Option 2: Open source (our options)

Reason: One of the few editors on the market that implements text Model interworking with HTML

How does the Text Model handle multiple changes

Key points: Operational Transformation makes the Text Model able to:

  1. Convert to and from HTML changes
  2. Handle conflicts with multiple changes

Operation

  • Operation Type: insert delete retain

  • Operation length: Text Model Applied to the editor mechanism: from coordinate 0, the Operation sequence

Transform-ot algorithm is an important method

When there are two models generated based on changes to the same version, we can change one model and convert it to a model based on another modleL application

Conclusion:

  1. Document content and changes are represented by Operation
  2. Transform to resolve conflicts of multiplayer changes

Multiterminal synchronization

The process here

This is the end of today’s sharing, mobile phones and computers are also out of power, thank you for seeing here.