Keep creating , Accelerate growth ！ This is my participation 「 Nuggets day new plan · 6 Yuegengwen challenge 」 Of the 26 God , Click to see the event details

This is the last year I had the honor to participate in GIAC Some scattered thoughts and summaries of the big front end special session of the global Internet architecture Conference . It may not be very systematic , Try to express my own thoughts , I hope it can also help you .

Interpret the front-end design from the first principle

Speaker ：

Amoy is the front-end engineer of the technology department ： Lin Yang （ Lianshan ）,2014 In, I launched my first open source framework IOING,2018 Joined ali , Focus on participating in front-end intelligence related projects , Period output 2 Open source projects ,3 Technical patents .

What is the first principle

thing （ System ） The source of essence , For example, a tangled rope in the figure below , Its first principle is its starting point .

The first principle has the following characteristics ：

1. Any system has its own “ The first principle ”

2. “ The first principle ” It is a deductive thinking

3. Starting from the essence , The foundation of logical reasoning

4. The noumenon of things 、 The essence 、 nature

5. Theory of ideas 、 Simplicity

The primacy of things may change with the change of external conditions . For example, a company has different first strategic objectives in different time periods . First principles can help span discontinuities .

How to disassemble the first principle ？

To identify two key elements :“ Purpose ” and “ The way to achieve the goal ”. Starting from the goal , Look for ways to achieve your goals .

reflection ： Business needs , The first principle should be the pain point and goal of the demand . Development process , Have a problem , Deduction should be used to infer the “ The first principle ”—— Root cause problem , From the root cause analysis, we can get the solution .

How the front end uses the first principles

First principles and programming

The opening and closing principle is the first principle , Other original development responsibilities should be based on the open closed principle .

Opening and closing principle (The Open/Closed Principle, OCP) Regulations “ Objects in software （ class , modular , Function, etc. ） It should be open to extension , But it is closed for modification

JS Runtime security case

background ： Many Taobao pages are provided by the settled party , How to ensure that the other party's code is safe ？ For example, I don't want third-party Web pages to get Cookie. How should we limit their ability ？

problem ： How to limit ？ Remove at compile time ？ Or run-time limitations ？ The final approach is to limit the runtime . For example, the scheme of directly using containers in small programs , Is what the container provides , Users can only use these capabilities

Solution 1 ： Overwrite unsafe variables ? such as , Do not pop up windows in the system alert. No access cookie wait . But the disadvantages are obvious —— Unable to enumerate all blacklists

Find the first principle of the problem

What is the browser's security policy ? such as ：

• The same-origin policy

• Sandbox mechanism

Know the first principle , What to do ？

Specific solutions

iframe There is a property in , be called sandbox. You can control the permissions of embedded web pages . Put the third-party code in this setting sanbox attribute Of iframe in , Equivalent to providing an isolation layer , namely “ The sandbox ”

Embedded web pages have normal permissions by default , Like executing a script 、 Submit Form 、 Pop up window, etc . If the embedded page is a page of another website , You don't know what the other person will do , Therefore, there are security risks . In order to limit <iframe> The risk of ,HTML Provides sandbox attribute , Allow setting permissions for embedded web pages , Equivalent to providing an isolation layer , namely “ The sandbox ”.

If the third party must use the ability like pop-up window , We will provide , But I will do some encapsulation , For example, statistics 、 Judge whether there are risks, etc .

But the exposed API Is there an incoming ⻛ risk . External incoming Object object , Find the internal through the prototype chain constructor, Can pass call The way to call methods , At this time, its context is the external context , There may be risks .

So how can we solve this problem ？ adopt Proxy Monitor and control , All access and settings need to go through the proxy , In the process of agency , We will serialize the object , So what is obtained in the sandbox is the serialized content , After the sequence, it is safe .

about DOM Node operation , It can also be done through Proxy To solve the . For example, call document.creatElement When , Only some of the whitelist can be created tag.

Others are right DOM Limitations of operation , For example, click event onClick, We need to spread information such as the event itself , There will be security problems . Similar to the one above , When a processor function is passed in , Serialize it , Finally, execute . Achieve one Observe function , Listen for information returned to the processor , Serialization and authentication are performed in this process .

The overall process above is as follows ：

Interpretation of some cases of intelligent code output

The problem to be solved ： The efficiency problem . Communication and coding take up most of the time . as follows ：

Our goal is two important steps , Convert vision to layout HTML + CSS Code for . take PRD Into logic JavaScript Code .

A peer-to-peer protocol is required between communication and coding to complete docking . But natural language and program are ambiguous , Natural language is unstructured , And programming languages are structured . To disambiguate , We need to do the following ：

• Structured collection
• Uniform table protocol
• Limit the scope of information

How to find peer-to-peer protocols , There are two ways to do it ：

• Through the statistics and induction of the existing work, we can draw the essential conclusion . According to the current code to summarize the commonly used with PRD What is relevant .
• Deductive thinking .

Summary

First principles are not just about programming , It's a way of thinking , It can help us better solve the problems we encounter . The concept of first principles is abstract , The author spent a lot of time explaining the first principle , Also from the JS Two examples of security policy and intelligent code generation , Explain profound theories in simple language .

Hello, I'm on my way out Flutter Exploration and Practice on

Speaker ：

Chenxiaohui .2020 year 8 Join Hello travel in June , Hello, head of the big front end Technical Committee & Head of Pratt & Whitney's big front end , In terms of business, I am mainly responsible for four-wheel free ride 、 Take a taxi 、 R & D management of car owner service and other businesses , It is committed to promoting the evolution of Harold's large front-end technology architecture towards cross end containers , At present, it mainly focuses on large front-end engineering , Multiterminal rendering container , Large front-end high availability system , Business architecture governance, etc .

Infrastructure

Explore the end container , The goal is

• Standardization . More standardized containers , Whatever it is , It mainly adopts one standard , Can quickly migrate
• Containerization
• Dynamic . Business is changing fast , Faster release

Competence level ： Generalize the underlying capabilities , Provide capacity for the container layer , Whatever the container is , You can use Container layer ： Exploration of containers , Adaptation and unification The business layer ： Support different business forms

flutter Use , Green module is the content to be built , Such as R & D tools 、 Stability monitoring, etc .

Two ends change to one end , There may be more time , But I feel that in the long run , It's still very meaningful

flutter Ecological discussion

End to side technology comparison

• On the performance .flutter It is different from the original . On single page applications , Not much difference . Some page jumps 、 The demand of animation will be slightly lower than that of native
• Release efficiency .flutter There is no great advantage . Cannot dynamically publish
• Uniformity
• R & D Efficiency . Some infrastructure needs to be considered
• ecology . At present, it is a hard injury , Urgent need for improvement

Summarized below ：
Flutter advantage ：

• Skia engine , Strong consistency
• near Native Performance experience
• iOS and Android Dual end R & D efficiency

Flutter Insufficient ：

• The ecology is not perfect
• The whole framework is evolving
• Lack of dynamics

Flutter Dynamic practice

The basic principle

Now there are several schemes in the industry ：

• similar RN. adopt JavaScript The ability to insinuate flutter Component to render
• DSL + Runtime
• Compile and distribute the product

At present, the second scheme is adopted for Hello travel , Approximate process ： Source code into AST, then AST convert to JSON, pack , Send to the end , Unpack , Explain to perform

This scheme has the following problems , At present, there are only some PV Try it on a few simple pages

• There are many syntax elements to be implemented
• Symbol table and Flutter Version dependency