Introduction to practical web front-end JS and UI framework

Front-end Js framework summary

Overview:

There are days when I don’t sit down and write a blog. In the era of rapid development of the Internet, the speed of technology updates and iterations is also accelerating. I feel envious when I see Java, Js, and Swift flourishing in various fields. The news about .net is also exciting, including .net core 1, mono, xamarin, etc., but most of them are still in the roaring stage. In fact, the understanding of technology has always been that technology serves business and products, and products promote the evolution of technology to varying degrees.

Web, wireless, Internet of Things, VR, and PC are promoting technological integration and micro-innovation from different directions. The role of programmers in different business scenarios is reversed. With the emergence of node.js, the role of language is also changing, and JS plays an increasingly important role. I also sorted out the knowledge I learned after dinner. After reading "Your Knowledge Needs Management", I strongly realized that a messy and extensive knowledge reserve is far less beneficial than organized and organized knowledge. So, yes, we need to come back from time to time to sort out the knowledge we have in order to prepare for emergencies.

1. Front-end framework library:

1.Zepto.js

• Address: http://www.css88 .com/doc/zeptojs/

• Description: Zepto is a lightweight JavaScript library for modern advanced browsers. It has a similar API to jquery . If you can use jquery, then you can also use zepto. I also learned about Zepto through chatting with a Tencent friend, and only had some basic understanding.

2.SUI Mobile

• ##Address: http://m.sui. taobao.org

• Description: SUI Mobile is a set of UI libraries developed based on Framework7. It is very lightweight and beautiful. You only need to introduce our CDN file to use it. It is compatible with iOS 6.0+ and Android 4.0+, making it very suitable for developing cross-platform Web Apps.

• Usage: You have also seen that it is used for the development of Web App on the wireless side.

3.Node.Js

• Address: http://www.runoob .com/nodejs/nodejs-tutorial.html (Chinese website)

• Description: Node.js is a Javascript runtime environment (runtime). In fact, it encapsulates the Google V8 engine. The V8 engine executes Javascript very quickly and has very good performance. Node.js optimizes some special use cases and provides alternative APIs to make V8 run better in non-browser environments.

Node.js is a platform built on the Chrome JavaScript runtime, used to easily build web applications that respond quickly and are easy to expand. Node.js uses an event-driven, non-blocking I/O model to be lightweight and efficient, making it ideal for running data-intensive real-time applications on distributed devices.

Simply put, Node.js is JavaScript running on the server side.

　Node.js is a platform built on the Chrome JavaScript runtime.

Node.js is an event-driven I/O server-side JavaScript environment based on Google's V8 engine. The V8 engine executes Javascript very quickly and has very good performance.

• Usage:

　1. RESTful API

This is the most ideal application scenario for NodeJS , can handle tens of thousands of connections, and does not have much logic. It only needs to request the API, organize the data and return it. It essentially just looks up some values ​​from some database and composes them into a response. Since responses are small amounts of text and inbound requests are small amounts of text, the traffic is not high and a single machine can handle the API needs of even the busiest companies.

　2. Unify the UI layer of Web applications

The current MVC architecture, in a sense, Web development has two UI layers, one is what we finally see in the browser , and the other one is on the server side, responsible for generating and splicing pages.

I won’t discuss whether this architecture is good or bad, but there is another practice, the service-oriented architecture, which can better separate the dependencies of the front and back ends. If all key business logic is encapsulated into REST calls, it means that the upper layer only needs to consider how to use these REST interfaces to build specific applications. Those back-end programmers don't have to worry about how specific data is passed from one page to another. They don't have to worry about whether user data updates are obtained asynchronously through Ajax or by refreshing the page.

　3. Applications with a large number of Ajax requests

For example, personalized applications, each user sees a different page, the cache is invalid, and an Ajax request needs to be initiated when the page is loaded. NodeJS can Respond to a large number of concurrent requests. In short, NodeJS is suitable for use in scenarios with high concurrency, I/O intensive, and a small amount of business logic.

4.angular.Js

• Address: http://www.runoob.com/angularjs/angularjs-tutorial.html (Chinese website)

• Description: AngularJS[1] was born in 2009, created by Misko Hevery and others, and later acquired by Google. It is an excellent front-end JS framework that has been used in many Google products. AngularJS has many features, the most core of which are: MVVM, modularization, automated two-way data binding, semantic tags, dependency injection, etc.

• Purpose: By describing it, we should be able to understand the real purpose of AngularJS, MVVM, modularization, automated two-way data binding, etc. In addition to simple DOM operations, it also reflects the power of Js programming. Of course the application should depend on the occasion.

5.JQuery Mobile

• ##Address: http: //www.w3school.com.cn/jquerymobile/ (Chinese website)

• Description: Query Mobile is the version of jQuery on mobile phones and tablet devices. jQuery Mobile will not only bring the jQuery core library to mainstream mobile platforms, but also release a complete and unified jQuery mobile UI framework. Supports global mainstream mobile platforms. The jQuery Mobile development team said: We are very excited to develop this project. The mobile Web needs a cross-browser framework to allow developers to develop truly mobile Web sites.

• Purpose: jQuery Mobile is a framework for creating mobile web applications.

jQuery Mobile works on all popular smartphones and tablets.

　　　jQuery Mobile uses HTML5 and CSS3 to lay out pages with as few scripts as possible.

6.requirejs

• ##Address:

  http://www.requirejs.cn /

• Description:

  The goal of RequireJS is to encourage modularization of code, which uses a different script loading step than the traditional <script> tag. You can use it to speed up and optimize code, but its main purpose is to modularize the code. It is encouraged to use the module ID instead of the URL address when using scripts. <strong></script>

RequireJS loads all code at an address relative to baseUrl. The top-level <script> tag of the page contains a special attribute data-main, which is used by require.js to start the script loading process, and baseUrl is generally set to the directory consistent with this attribute. </script>

• Purpose:

  Modular dynamic loading.

7.Vue.js

• Address:

  http ://cn.vuejs.org/

• Description:

  Vue.js is a library for building interactive Web interfaces. It provides MVVM data binding and a composable component system with a simple, flexible API. Technically speaking, Vue.js focuses on the view model layer on the MVVM pattern and connects the view and model through two-way data binding. Actual DOM manipulation and output formatting are abstracted into directives and filters. Compared to other MVVM frameworks, Vue.js is easier to get started with.

8.backbone.js

• Address:

  http://www.css88 .com/doc/backbone/

• Description:

  Backbone provides a structure for models, collections, and views for complex Javascript applications . The model is used to bind key-value data and custom events; the collection is equipped with a rich API of enumerable functions; the view can declare event handling functions and connect to the application through a RESTful JSON interface.

9.React

##Address:
• http://reactjs.cn/react /docs/why-react.html

Description:
• React is a JavaScript library used by Facebook and Instagram to create user interfaces. Many people think that React is the

  V (view) in MVC. We created React to solve a problem: Build large-scale applications where data changes over time. To achieve this goal, React adopts the following two main ideas.

10.Ionic

##Address:

http://www.ionic.wang /js_doc-index.html

• Description:
Ionic is both a CSS framework and a Javascript UI library. Many components require Javascript to work their magic, although often components require no coding and are easy to use via framework extensions, like our AngularIonic extension.

• Ionic follows the view control pattern, and its popular understanding is similar to the Cocoa touch framework. In the view control pattern, we divide different parts of the interface into subviews or subview controllers that contain other views. The view controller then "drives" the inner view to provide interaction and UI functionality. A good example of this is the Tab Bar view controller that handles clicking the tab bar to switch between a series of visual panels.

  Browse our API documentation to learn about view controllers and the Javascript utilities available in Ionic.

  Ionic is currently the most promising HTML5 mobile application development framework. Build applications with SASS, which provides many UI components to help developers develop powerful applications. It uses JavaScript MVVM framework and AngularJS to enhance the application. Provides two-way binding of data, making its use a common choice for web and mobile developers.

2. Front-end UI framework

1.Pure

• Address:http://purecss.org/layouts/

• Description: Pure is carefully designed to be used in any web project. To illustrate this, we have created the following templates. These templates are all responsive and don't use any JavaScript.

• Usage: It is really a very beautiful style framework that allows us to quickly build some personal products, and of course it can also serve some projects at work.

2.bootstrap

• ##Address: http://www.bootcss.com /

• Description: Simple, intuitive, and powerful front-end development framework makes web development faster and simpler.

3.EasyUI

• Address: http:/ /www.jeasyui.net/ (Chinese website)

• Description: easyui is a collection of user interface plug-ins based on jQuery.

Easyui provides the necessary functionality for creating modern, interactive, JavaScript applications.

Using easyui you don’t need to write a lot of code. You only need to write some simple HTML tags to define the user interface.

Easyui is a complete framework that perfectly supports HTML5 web pages.

　　　easyui saves the time and scale of your web development.

　　　easyui is very simple but powerful.

4.Ant Design

• Address: http://ant.design/

• Description: A UI design language, a set of interactive language and visual system that is refined and applied to enterprise-level backend products

3. Visualization Component

1.Echarts

• Address: http://echarts.baidu.com/

• Description: ECharts, a pure Javascript chart library, can run smoothly on PC and mobile devices, and is compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.), the bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly customizable data visualization charts.

2.tableau (charged)

• Address: http://www. yuandingit.com/special/tableau/index.html

• Description: Tableau is the simplest business intelligence tool software on the desktop system. Tableau does not force users to write their own Defining code, the new console is also fully customizable. On the console, not only can the information be monitored, but complete analysis capabilities are also provided. The Tableau console is flexible and highly dynamic.

4. Front-end building tools

1.gulp

• Address:http://www.gulpjs.com.cn/

• Description: Easy to use

　Through the strategy of code over configuration, Gulp makes simple tasks simple and complex tasks manageable.

Build quickly

Using the power of Node.js streams, you can quickly build projects and reduce frequent IO operations.

High-quality plug-ins

Gulp’s strict plug-in guidelines ensure that plug-ins work as concisely and high-quality as you expect.

　　　Easy to learn

　　　With a minimal API, mastering Gulp is effortless, and the construction work is under control: like a series of streaming pipes.

5. Blog construction

1. Technology combination

HEXO+Github, build your own blog.

Site: http://www.jianshu.com/p/465830080ea9

Introduction to HEXO: Hexo is an open source static blog generation Tool, developed with node.js, the author is Taiwanese college student tommy351

Preparation: git + node.js + markdown editing + gitcafe + domain name

Summary: This article is a knowledge sorting or information sorting article. It is used for the management of one's own knowledge and can also be used as a database for reference. Will continue to be updated.

Thank you Xiaoguang for your support, Pure’s offer is very good.

This article is reprinted to: http://www.cnblogs.com/mbailing/p/5627792.html#undefined Please indicate the source for reprinting, thank you!

The above is the detailed content of Introduction to practical web front-end JS and UI framework. For more information, please follow other related articles on the PHP Chinese website!