background
Since last year, the term ‘microapplication’ has emerged in the front end, referring to a design concept of front-end architecture, which is compared to back-end microservices in the industry. Didn’t calm down and have a good understanding, it is now over project, plus recently read a few article about micro service front end, (especially hate to say some articles, reference the name on the tall, a read down) nothing back, what we are doing the architecture design is not ‘micro service?
Let’s start with front-end microservices.
I think it is a kind of architecture design, not a new technology, but a product of the various technology combine, since it is architectural design, then it must have a usage scenario, otherwise it is empty talk, but its usage scenario is facing the platform level product solutions, can support many web applications, each independent decoupling between applications, and can be expanded, It is not only easy to maintain old code and old business, but also easy to develop projects. At the same time for developers, such architecture design is an independent, complete can be responsible for individual web applications, without the need for a crossing guard collaboration with other team, so I think if the product is a platform, do is solution, support the development of the company for a long time, it’s a kind of design thought might as well try, However, if it is just several independent Web applications, such as the company’s official website, background system and payment system, these projects are not related at all, there is no need to do so, but will increase the difficulty of the project itself.
The development process
I think the emergence of micro-services is largely due to the emergence of SPA single page application, the emergence of componentalization. From the development of front-end history, a complete page from the combination of div, A, SPAN tags, to the combination of componentalized modules, and then to the combination of applications, step by step transition development. Originally a page is composed of several labels add some words or pictures, is mainly used to output information to consumers, eventually ajax, partial refresh human-computer interaction, the page is divided according to function module, now single-page applications, directly according to the application, each application has its own set of data, interaction, logic, business, etc. The page becomes a container, or a screen, and what it does is it has a loading mechanism that handles a lot of relationships and data communication between applications,
Of course, there are also external factors, such as the upgrading of engines by major browser manufacturers, the emergence of a large amount of interactive data, the upgrading of experience, cloud deployment and other factors. These demands make the front-end field no longer simple to display content, and we need to constantly break through ourselves, so the architecture design arises at the historic moment.
How to build containers or platforms in microservices, how to load different Web applications, how to communicate data between applications, how to expand the definition of applications, how to deal with platform-level core methods, etc. With these problems, I will talk about my views and design ideas based on our company’s projects.
First, there’s a basic container
Because of the complexity of the project and background characteristics, we use the jq, don’t feel low, with millet plus rifles to defeat an enemy is strategy with well, container is the iframe, data communication between applications, is to mount the window this large object (if you read the famous framework source code, find were to do so).
Loading mechanism
So how to load different applications? Some methods are to add all application JS files in the first time, each application is an independent large object, according to the URL composition of the address bar, get the hash name, the name can be the name of the application, to instantiate a specific application.
Or learn from the Vue router, which uses hash to change names and does not refresh pages to load application-specific JS files on demand.
Or directly in the form of an entire Web component, via document.append.
Our company adopts the second method, which is controllable and the loading mechanism can be customized. Picasso’s famous quote, ‘Good artists copy ideas, great artists steal ideas’.
And then how can each application be handled, how can it be independently extended without duplication of code?
, according to the principle of all js files are now module, data for each application, interactive logic, are independent, or independent modules, the extension is a separate class, every time with the specific data and new business logic, between each other using the import for reference, there will be no code is becoming more and more miserable, Each app has an index.js file that is loaded each time the app is launched.
How do those platform-level base layer components operate
Inheritance, because they are platform base layer, each application will use, so in each application logic to handle, all need to use the platform level methods through inheritance, of course, each application is different, the platform level tool to do ‘brought the box, the application can free combination of these tools, combined with their own data structures, their applications, the software industry there is a saying, ‘There is no problem in architectural design that can’t be solved with one layer of abstraction, or two.’
Pay attention to late maintenance
If you do not understand this framework, it is easy to break this framework when a new person receives the project or a new business appears. You may still follow the programmer’s original idea to go to the upper heap. If he is an expert, he may understand it, but what about a beginner and intermediate level? Right, the most obvious example is that you can just add a small function, automatically inserted directly into, although successful, the result is easy to ignore it is a platform level and application level method, may even lead to your other applications for naming a bad part of the function, so the architecture rules is very important, also found that When you’re adding a small feature, it’s not easy to add new features because it’s a platform-level app, and you might question it, but as you dig deeper and peel back the layers, you’ll eventually find that there’s a reason for it.
About Background Communication
Because all the focus of the project is placed in the front end, the function of the back end is weakened, and only the most basic data can be added, deleted, changed and checked.
About Build Deployment
The platform level deployment can also reflect the characteristics of microservices, independent deployment and independent construction. Therefore, the scaffolding needs to be customized in combination with the project. In our project, the customized NPM command is defined by the name of web application, while under the Webpack folder, The directory structure looks something like this:
Similar to other scaffolding, there is a basic base file for platform-level build optimizations, such as compression of static resources, Babel transbuild, package build, differentiated deployment of development and build environments, etc., to cover the entire application. Each application then has its own separate Webpack file. People who have a certain understanding of Webpack know that in the application of inheritance or use of baseJS file, directly require in, because several major elements of Webpack are formed by object attributes, so want to process the baseJS file, you can directly modify these attributes, so, I built my own build deployment of the application,
The webpack file for a specific Web application is defined by command in package.json
On the other hand, in the CMD command, simply enter the command NPM run XXX and the specific Webpack file will be automatically loaded in the package.json command
Quickly understand
It’s a very complex project, and you want to get to it really quickly and understand the architecture, and I think it’s important to grasp two things,
First, data flow, you have to pay attention to its data structure and flow, from top to bottom (parent-child components, between applications), from left to right (sibling components, between applications), how the data is presented to each application. There is an overall concept.
Second, the event mechanism, in fact, the data processing of interaction, how every part of the data, what is the logic to handle, further to the specific application, to analyze its business, a large part of the courses of computer in the college is professor in the data structure and algorithm, and not to teach you a lot of mainstream framework, I think, An application is made up of data structures, algorithms, and its own business data, while vUE or React is just a tool that allows you to better implement your idea.
conclusion
Halfway through, actually discovered that the vue design special like I think vue componentization design is object-oriented ideas, the react more functional programming, all js file, in the form of a web components to integrate applications, either way the mainstream frame structure, the design idea of more understanding the framework itself, In my opinion, it is not necessary to use the mainstream framework, but to use a lot of API is a new technology. It is the most fundamental thing to learn from ideas, improve JS internal skills and break through bottlenecks in combination with business.
Cosmetic surgery with talent. I mean it.
Welcome to pay attention to the public number: rely on talent cosmetic surgery