Front-end architecture technology selection

Common front-end product forms include:

• Content Web site: focus on rendering optimization, front-end logic proportion is small
• Operational B/S system: data and logic as the center, the interface is more orderly
• Embedded Web native applications: Handles caches and some local interfaces, both PC clients and mobile

The front-end frameworks of these three products obviously deal with different things, so they can be subdivided into 2-3 project templates and sorted out the corresponding seed projects for the initialization of similar products.

Choosing a front-end framework should take into account both the framework itself and the team

When choosing a framework, look at both the capabilities of the framework and the capabilities of your team.

Here are some of the most popular technology references, ranked by Github’s attention:

Architectural framework

Build tools

CSS pretreatment

Background system can consider EXT, EasyUI, Avalon and other domestic excellent framework is also worth considering

If your product is a back-end system, then you have two options: use EXT, EasyUI, a major UI library solution, where EXT is so exclusive that it’s hard to use with other front-end solutions. Module organization, packaging, data visualization, it’s all done for you. It’s beautifully documented and moderately difficult to get started, but it requires your team to be very stable, and hiring a dedicated EXT front-end is hard right now. EasyUI is a relatively big-name UI framework in China. Although it is closed source, it is not difficult to expand it.

Focus on SEO products, consider jQuery+Bootstrap+RequireJS combination

If your product is a demo heavy product like the mall, SEO requirements, MVVM is not suitable. Angular and Avalon are currently working on back-end rendering, but not yet on the table. JQuery +Bootstrap+RequireJS works great. RequireJS does more than just provide an on-demand loading mechanism, it also allows us to organize larger pieces of code. If not RequireJS, another domestic option is SeaJS, whose specification is CMD. In addition, there is the CommonJS specification, but this can not run directly in the front end, need to use feKit, FIS, Webpack and other build tools to merge. However, the framework you choose must have either AMD, CMD, or CommonJS loading specifications, so that you can extend laterally. As for plug-ins, currently small plug-ins tend to use UMD, it can be AMD, CMD, CommonJS any loader to load.

• Bootstrap is mainly aimed at the desktop market. Bootstrap3 puts mobile first, but the desktop is still the main target market of Bootstrap. Bootstrap is based on jQuery for JavaScript processing and supports LESS for CSS extension. If you want to use Sass in the Bootstrap framework, you need to add compatibility through the Bootstrap-sASS project. The Bootstrap framework is very satisfactory in layout, layout, controls and special effects, with rich preset effects, which greatly facilitates user development. In terms of style setting, users need to manually set it when downloading. The configuration granularity is very fine, and the corresponding complexity is not intuitive, so you need to be very familiar with Bootstrap configuration to be able to handle it with ease.
• JQuery UI is an extension to the desktop side of the jQuery project, including rich controls and effects that work seamlessly with jQuery. In addition, there are many styles preset in the jQuery UI for users to choose from. If you are not satisfied with the preset style, you can also configure the display effect of jQuery UI through the visual interface. It is very convenient and high-end.

Mobile technology is messy and requires multiple approaches

If your product is mobile, it’s basically a SPA architecture because it reduces waiting, full page refreshes and requests. There’s a lot of confusion in the space right now. Unlike PC, there are N times as many browsers to work with, and there are a lot of weird bugs that result from browser vendors chopping and changing browser features for performance. The community is sorting out these bugs and the antidote. But there is no single framework that can solve all the problems. Here’s what I think:

RequireJS (load on demand, mobile can not pack, use 304 cache, Tencent made a better incremental update loader MT, Can also try) +Backbone (organization code and routing management) +Zepto (light DOM manipulation) + Fastclick.js (click through and delay handling) + hammer.js (various touchscreen events) + isCroll5.js (scroll bar handling) + inanimate. CSS (CSS3 animation) +Enquire.

You can see that every part of the mobile is rotten to the core, and every part needs special tools to fix it. Mobile is very experiential, there are all kinds of animations in every corner, but the browser or built-in WebView is bad, so the topic of Native and Hybird has been so hot. Some people say that since DOM is all about performance, why not use Canvas instead? Facebook also launched its own similar solution React Native, which implements its OWN GUI, but uses JavaScript. It was implemented using its own super-high performance React wheel. This could be a road. React inserts large tag language (JSX) into logic, just like Angular’s Java style. React is also very exclusive and difficult to use with other libraries. At the same time, we can see that jQuery Mobile, from the famous jQuery company, didn’t make the cut. That performance is so bad that even Sencha Touch doesn’t make it. That’s just the core library, not the UI library. There are a lot of UI libraries that are called Mobile First, and because they ignore IE, they can boldly use CSS3. At present, the outstanding ones are Foundation, Semantic, Refill, and Ratchet. Inoic, Sencha Touch, Kendo UI Mobile…

Other reference points

1. The framework itself: a. Maturity b. architecture and patterns C. ecosystem

React is undoubtedly the most popular front-end framework at present. React is currently in the stage of rapid development, and it still needs time to consider whether it is mature. React was designed with a unique and revolutionary design concept, with excellent performance and very simple code logic. As a result, more and more people are paying attention and using it as a possible mainstream tool for future Web development.

**Angular** provides a robust set of features and a way to isolate code into modules that are beneficial for reusability, maintainability, and testability. Its core features include MVC, modularity, automatic two-way data binding, semantic tagging, dependency injection, and more. Angular has been on the radar since its inception in the open source community, riding the wave of Web frameworks with its cutting-edge design concepts and strong ecosystem.Copy the code

Although Vue is a personal project, it is as simple, lightweight, fast, data-driven, module-friendly, and componentized as AngularJs. This is because Vue is basically a library based on Angular design ideas, not a framework. Speaking of VUE, we have to talk about its small size. One of the advantages of small size is that it gives users more freedom to choose corresponding solutions, and it gives users more room to cooperate with other libraries. Vue may be small, but it has all the elements in it and is handy for building large applications. In recent years, VUE has been recognized by most companies at home and abroad, and the community ecosystem has become increasingly perfect.

2. Project fit: a. Whether it can meet the needs b. Whether it is suitable for the project

React has less to worry about in terms of data logic and can directly perform full assignments. The idea of local DOM updates via the virtual DOM is appealing, eliminating front-end judgment and manipulation of data logic. React at present, I feel that the advantage lies in native relevance, which has great potential in the future. For a simple Web project, the learning cost is still very high compared with VUE. React is just a View that needs to be developed with other flux-like frameworks. Finally, in terms of usage scenarios, React works with a strict Flux architecture, which is suitable for complex projects with large-scale collaboration among multiple people.

Angular allows you to build powerful, easy-to-understand, and maintainable organizational applications. Angular is a structured framework for dynamic Web applications that provides a new way to develop applications by extending THE SYNTAX of HTML to compensate for the static language used to build dynamic Web applications. Angular structure is about separation of responsibilities so that code is easy to understand, maintain, and test.

Vue is small, has a flexible interface, is intrusive, and can be used for parts of a page rather than the entire page. Good expansibility, simple source code specification. More suitable for mobile WEB development, declarative development, higher performance than Angular, much smaller. Community ecology is gradually improving, relatively few people use it, there is not much information on the Internet, the cost of solving the problem is high.

Decision making purposes

Based on the reference points and project requirements, the above commonly used web tools and architecture frameworks are selected. The UI framework can be selected according to compatibility, ease of use, and proficiency.

Alternative (Comparison of major Web Frameworks)

conclusion

Compared to angular.js, vue.js provides a cleaner and easier to understand API that allows us to quickly pick up and use vue.js. But on the other hand, it’s bland, even a little feeble. AngularJS is very structured, large and complete, bloated but mature and stable. React to me is not a framework, but a design idea. And the idea of it is very

React is unprecedented and can even be ported to any framework, so there is no comparison between React and the above frameworks. React leads and inspires a series of development ideas in the React ecosystem, and a variety of new gameplay keeps emerging. There is still a long way to go, so I think it is better to wait and see how react changes.

There is no universal framework, there is no universal technology, the most suitable is the best