2021 giac big front end special session thinking summary (Part I)

Gopal 2022-06-23 18:50:23 阅读数:679

giacbigendspecialsession

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
版权声明:本文为[Gopal]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/174/202206231739572923.html