What is the difference between web front-end and front-end

Front-end is a general term with a wider scope. Web front-end belongs to the front-end of web development. It is a clear scope and the direction is clearer; front-end development includes mobile front-end development and web front-end development, which includes PC Development in the field of terminal development and mobile terminal, while web front-end development mainly refers to traditional PC-side web development, which is the biggest difference between them.

The operating environment of this tutorial: Windows 7 system, Dell G3 computer.

Front-end is a general term with a wider scope. Web front-end belongs to the front-end of web development. It is a clear scope and the direction is clearer. The front-end work of implementing user-side application coding based on product design/UI belongs to the category of front-end development (including different application forms such as web, app, small program, desktop, etc.); it is the user-facing interface, generally speaking , the front end includes the Web front end.

Simply put, front-end development includes mobile front-end development and web front-end development, which includes PC-side development and development in the mobile-side field. Web front-end development mainly refers to traditional PC-side web page development. This is The biggest difference between them.

Mobile front-end development and web front-end development both belong to front-end development, with the following differences.

1. Business application scenarios

Web front-end development mainly refers to traditional PC-side web page development. Pages are mainly run in PC-side browsers. Pages developed by mobile front-end are mainly run. on mobile.

Intuitively, you will feel that the PC page is larger and the mobile page is smaller. However, according to development experience, a large page does not mean that the written code is complicated, and a small page does not mean that the development is simple or difficult. Dealing with transactions mainly depends on specific business needs.

2. Use of new technologies

Since the mobile terminal is mainly based on the webkit kernel, it has better support for new technologies such as HTML5, so new technologies can be used on a wider scale, and PC-side development requires compatibility with older versions of browsers such as IE in many scenarios. Due to browser compatibility considerations, the use of new technologies is sometimes restricted.

3. Page adaptability

Traditional PC-side page development usually chooses to set a fixed width for the page, with white space on both sides. However, the mobile-side page has a mobile phone screen as its carrier. It is much smaller than a PC and generally chooses to display as much content as possible on the mobile phone screen. This requires the mobile page to be able to fully adapt to mobile phones of various screen sizes and make maximum use.

From this point of view, the adaptation of mobile pages is more difficult.

4. Page performance

The network conditions on the PC side are generally relatively stable, and they are connected to the network through network cables or Wi-Fi. However, the mobile side is more complicated. In addition to Wi-Fi, there are Switching between 2G, 3G, 4G and even between several different network connections often occurs.

The challenge that unstable network connections bring to page performance is that the page resources on the mobile side should not be too large, otherwise the page will be inaccessible under poor network conditions, seriously affecting the user experience.

5. Frame selection

Due to the instability of the mobile network, when selecting mobile page frameworks, we generally only consider small and beautiful frameworks, such as zepto.js After such compression, there is only 9.6K, which can meet the needs of general business. If you want to build a more complex single-page application, you can choose a framework like vue.js, which is powerful, but the volume after compression is only more than 20K. .

The web side has a relatively large range of choices, and some heavier frameworks can also be considered based on project needs. For example, the ancient but huge ext.js is still active in some enterprises with its many UI components. In the background management system project.

Extended information

Techniques required for Web front-end development:

1. Proficient in front-end development technology (HTML5, JS, JSON, XHTML, CSS3), understand the relevant standards of various technologies.

2. Master Ajax asynchronous programming and be able to write high-performance, reusable front-end components.

3. Have a deep understanding of programming ideas and front-end frameworks such as OO, MVC, and MVVM, and be proficient in a front-end framework (commonly used front-end frameworks Vuejs, AngularJS, React, Bootstrap, QUICK UI, and mobile terminals include: Frozen UI , weUI, SUI, MUI, AUI) to understand its principles (there are many frameworks, choose two or three mainstream frameworks, be proficient and have a deep understanding).

4. Good at Web performance optimization, accessibility, good experience in SEO, etc.; understand the concepts of separation of presentation layer and data layer, Web semantics (these are also very useful additions when looking for a job) sub option).

5. Understand the front-end security mechanism, and be familiar with the HTTP protocol and browser caching strategies.

6. Be familiar with the source code implementation of common JS development frameworks (such as prototype, jQuery, Mootools, Ext, Dojo, underscore, YUI, Kissy), and be proficient in at least one (of course, don’t choose someone who uses it) There are very few frameworks. You must understand that large projects are done by teams and you cannot build one yourself).

7. Have good experience in code writing and design document writing, and be proficient in using Git and other version control tools.

8. Have a clear understanding of common browser compatibility issues and have reliable solutions, such as IE6/7/8/9, Firefox, Safari, and Chrome.

9. Have high aesthetics (this is very important. If you see more templates and high-end projects, you can feel the big gap).

(Learning video sharing:Getting started with web front-end)

The above is the detailed content of What is the difference between web front-end and front-end. For more information, please follow other related articles on the PHP Chinese website!