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

Difference: 1. 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 phones. 2. The mobile terminal is mainly based on the webkit kernel and has better support for new technologies such as HTML5; while the web front-end requires compatibility with older versions of browsers such as IE in many scenarios, which in some cases limits the use of new technologies. 3. In terms of page adaptability, the adaptation of mobile pages is more difficult. 4. In terms of page performance, the performance of the web side is more stable than that of the mobile side.

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

According to the current general trend of front-end, front-end development is increasingly developing towards large front-end, and the content is also all-inclusive. Let’s talk about the difference between web front-end and mobile front-end.

1. Business application scenarios

Web front-end development mainly refers to traditional PC-side web page development. The page mainly runs in PC-side browsers. Mobile front-end development The pages that come out mainly run on mobile phones.

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 it can be used in a wider range The use of new technologies, 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 restricted in some cases.

3. Page adaptability

Traditional PC-side page development generally chooses to set a fixed width for the page, with white space on both sides, but for mobile Since the mobile phone screen of the page is much smaller than that of the PC, it is generally chosen 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 situation on the PC side is generally relatively stable, and all are connected to the network through network cables or Wi-Fi, but the mobile side is more complicated, except Wi-Fi, as well as 2G, 3G, 4G, and even switching between several different network connections often occur.

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, we generally only consider small and beautiful frames when selecting mobile page frames. , for example, zepto.js only has 9.6K after compression, 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 in function but compressed in size. Later, it was 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.

(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 mobile front-end. For more information, please follow other related articles on the PHP Chinese website!