Gopal 2022-06-23 18:50:23 阅读数:679
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 .
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 .
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 ：
Any system has its own “ The first principle ”
“ The first principle ” It is a deductive thinking
Starting from the essence , The foundation of logical reasoning
The noumenon of things 、 The essence 、 nature
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 .
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
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
What is the browser's security policy ? such as ：
The same-origin policy
Know the first principle , What to do ？
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 .
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
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 ：
The problem to be solved ： The efficiency problem . Communication and coding take up most of the time . as follows ：
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 ：
How to find peer-to-peer protocols , There are two ways to do it ：
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 .
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 .
Explore the end container , The goal is
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
Summarized below ：
Flutter advantage ：
Flutter Insufficient ：
Now there are several schemes in the industry ：
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