Front-end technology accumulation and project front-end accumulation of A Company project

Front-end technology accumulation and project front-end accumulation of A Company project
Best practices

BootStrap + jquery plugin + sea. js/require. js + Grunt

Preliminary Technology Selection

1. BootStrap + Backbone. js + require. js + jquery plugin
2. ExtJS
3. Angular. js
4. BootStrap + jquery plugin

Summary of front-end technology selection:

1. The reason for choosing the BootStrap + jquery plug-in is that ExtJS or Angular. js, a large and comprehensive MVC framework, has a high learning cost and has no project experience;
2. The reason for discontinuing require. js or sea. js (modular tool) and Grunt (Automated build tool) is that it was already a second-hand project when taking over the project, and rails had js modular tools and automated build tools.

However, if the background web framework does not provide modular tools and automated building tools, it is necessary to use modular tools like sea. js, require. js, and automated building tools like Grunt.

Front-end technical illustration

Note: Some technologies are not used

Front-End Plug-in Experience Chart

• Echarts
  1. Overall score: 5 stars
  2. Ease of use: 4 stars
  3. Billing: No
  4. Experience: Baidu believes that creating a canvas chart library can basically meet the needs of all wired tables. There are many examples, rich themes, and convenient offline inquiry, but there are some bugs (which do not affect normal use)

• D3.js
  1. Overall score: 4 stars
  2. Ease of use: 3 stars
  3. Billing: No
  4. Usage tips: open-source SVG chart library. When charts are complex, you can use d3 to plot them. There are many examples, but the ease of use is poor. This project is not used.

• HighCharts
  1. Overall score: 4 stars
  2. Ease of use: 4 stars
  3. Charge: Yes
  4. Usage tips: high charges, high ease of use, no bugs found, rich charts, not used in this project

Table Control

• DateTables
  1. Overall score: 5 stars
  2. Ease of use: 5 stars
  3. Billing: No
  4. Usage tips: The feature is powerful and has a BootStrap style, which is not used in this project.

• St-grid3.0
  1. Overall score: 4 stars
  2. Ease of use: 5 stars
  3. Billing: No
  4. Usage tips: internal components of the company are highly scalable and flexible, but some functions are not complete and can be expanded on their own

Time Control

• Jquery datepicker
  1. Overall score: 5 stars
  2. Ease of use: 5 stars
  3. Billing: No
  4. Usage tips: it is available for single-day date selection. The API is complete and can meet most of the requirements. We recommend that you expand functions from this plug-in and have a BootStrap style skin, which is not used in this project.

• FullCalendar
  1. Overall score: 5 stars
  2. Ease of use: 5 stars
  3. Billing: No
  4. Usage tips: it can be used in schedules, complete APIs, and easy to use

• DateRangePicker
  1. Overall score: 5 stars
  2. Ease of use: 5 stars
  3. Billing: No
  4. Usage tips: the dual-calendar time control, of course, jquery datepicker can also control the display of multiple calendar tables, but this control is well-encapsulated to meet more complex requirements

Select multiple calendars

• KitJS multiple-choice calendar
  1. Overall score: 3 stars
  2. Ease of use: 3 stars
  3. Billing: No
  4. Usage tips: I found it in the Forum and felt like a plug-in to complete the example. Now the author does not maintain it and has poor scalability. In this project, I have modified its source code multiple times to meet the requirement.

• Jquery Kalendae
  1. Overall score: Unknown
  2. Ease of use: Unknown
  3. Billing: No
  4. Usage tips: this plug-in is not used after it is found. Because it is a jquery plug-in, the scalability will be better than the previous plug-in for selecting multiple calendars (of course, just feeling), which is not used in this project.

Drop-down menu

• Select2
  1. Overall score: 5 stars
  2. Ease of use: 5 stars
  3. Billing: No
  4. Usage tips: it can be used for single-choice or multiple-choice queries. It can be searched based on keywords. It is easy to use and has improved APIs.

Dialog Box

• St-pop
  1. Overall score: 5 stars
  2. Ease of use: 5 stars
  3. Billing: No
  4. Usage tips: the company's internal dialog box components have high flexibility and scalability, but users may need to modify the style in line with the system style.

• Magnific-popup
  1. Overall score: 5 stars
  2. Ease of use: 5 stars
  3. Billing: No
  4. Usage tips: The hidden box dialog box can be used to display images, videos, and other good-looking styles.

Tree Control

• ZTree
  1. Overall score: 5 stars
  2. Ease of use: 5 stars
  3. Billing: No
  4. Usage tips: the API is complete and easy to use, but the speed of generating multiple nodes at a time is slow. This is also a drawback when generating DOM nodes with large data volumes. This project is not used in this project.

Edit controls in time

• Jeditable
  1. Overall score: 4 stars
  2. Ease of use: 4 stars
  3. Billing: No
  4. Experience: simple style, WYSIWYG text editing, style Extension

• Editable for BootStrap
  1. Overall score: 4 stars
  2. Ease of use: 4 stars
  3. Billing: No
  4. Usage tips: the edited text is not what you see or get. It is a simple small pop-up window, which makes you feel awkward, but has a beautiful style and rich functions (you can enter the text or drop-down list)

Css front-end framework

• BootStrap3.0
  1. Overall score: 5 stars
  2. Ease of use: 5 stars
  3. Billing: No
  4. Usage tips: css framework with rich styles and some useful js plug-ins
     We also recommend some css frameworks: Flat-style Flat UI (purchased by the company), Microsoft Metro-style Metro UI, and Google-style Google BootStrap.

Project Build Tool

• Grunt
  1. Overall score: 5 stars
  2. Ease of use: 4 stars
  3. Billing: No
  4. Usage tips: Automated build tools allow one-click compression (minification), compilation, unit testing, and linting to end your repeated build work.

Modular

• Sea. js
• Require. js
  1. Overall score: all are 5 stars
  2. Ease of use: all are 5 stars
  3. Billing: No
  4. Usage tips: two modular tools are two different specifications. sea. js is the CMD specification, and require. js is the AMD specification, which is not used in this project.

Js MVC Framework

• Backbone. js
  1. Overall score: 4 stars
  2. Ease of use: 4 stars
  3. Billing: No
  4. Usage tips: it is easy to learn. The source code is only over 2000 lines (with comments). It is very suitable for mobile versions. In my personal opinion, although Backbone is not as powerful as other MVC frameworks, it is more flexible, I personally think it can be used as a code specification tool for multi-person collaboration, which is not used in the project

• Angular. js
  1. Overall score: Unknown
  2. Ease of use: Unknown
  3. Billing: No
  4. Usage tips: only the File Upload Component is used in the project. Angular is an open-source MVC Framework of Google with powerful functions, but the error reporting is not particularly obvious, and debugging bugs are troublesome.

• ExtJS
  1. Overall score: 3 stars
  2. Ease of use: 3 stars
  3. Charge: Yes
  4. Usage tips: enterprise-level internal management systems, high-intensity customization, high learning costs, high maintenance costs, trouble debugging bugs, learning tutorials

Js Library

• Jquery
  1. Overall score: 5 stars
  2. Ease of use: 5 stars
  3. Billing: No
  4. Usage tips: Very easy to use and even close to the perfect js DOM library, jquery UI is very convenient and easy to expand, and jquery UI now has a BootStrap style skin

Icon font

• Font Awesome
  1. Overall score: 5 stars
  2. Ease of use: 5 stars
  3. Billing: No
  4. Usage tips: Commonly Used icons

Upload Control

• Jquery FileUpload
  1. Overall score: 5 stars
  2. Ease of use: 4 stars
  3. Billing: No
  4. Experience: HTML templates are easy to use, but it is not very easy to integrate into rails in this project, but it is still a very useful drag and drop upload software that supports viewing the upload progress

• Baidu WebUploader
  1. Overall score: Unknown
  2. Ease of use: Unknown
  3. Billing: No
  4. Usage tips: Baidu FEX's HTML + Flash upload plug-in is powerful, but not used in real projects. I don't know how it works and is easy to use.

Video Playback plug-in

• Jwplayer
  1. Overall score: 4 stars
  2. Ease of use: 4 stars
  3. Charge: No (but LOGO is charged)
  4. Usage tips: HTML5 does not support online playback of Flash videos, so external plug-ins are required. player is indeed a good choice, however, in this project, you can crack the plug-in to achieve the desired effect.

What technologies do java Programmers need to learn if they want to switch to web Front-end development? In addition, what does a cut graph mean?

Html, JavaScript (and many related frameworks such as JQuery and ext), and css.
Graph cutting is an image customized for the web Front-End using drawing software (such as PS.

Questions about learning web front-end development

Why don't you know DOM when you use xhtml + css?
DOM stands for the HTML structure.

You can practice in an outsourcing company first. Basically, the outsourcing company is working in the pipeline. One department is only responsible for the front-end static page, and the other department is only responsible for the background program, in this way, you can have access to a large number of projects, encounter a large number of problems, and accumulate experience in solving a large number of problems. The most important thing is that general outsourcing companies do not have high technical requirements, or even do not require Javascript, because they generally have special personnel to write.

Self-study is also necessary. I have mastered the basic theory and applied it to the company.

Good luck.