An overview of the
Are you still frustrated that your customers don’t want to upgrade their browsers?
Are you still struggling to debug code in IE8?
Are you also making fun of the poor performance of IE8?
If you have any of these problems, congratulations!!
Reading this article doesn’t really help… T_T
First of all, say the important thing three times W(~ _ ~)W
Upgrade your browser! Upgrade your browser! Upgrade your browser!
Don’t use Internet Explorer! Don’t use Internet Explorer! Don’t use Internet Explorer!
Hoo ~ teasing end
First of all, it is clear that in today’s IE8 adaptation is a very cost-effective thing.
According to The latest statistics from StatCounter, Internet Explorer accounts for less than 5% of domestic PC browsers, and even less of that is IE8
Of course, the statistics are based on Internet users, but the actual number of users is relatively higher, because many industries may not be able to upgrade due to hardware reasons, such as healthcare, banking, government, etc.
Therefore, if there is no special work needs, it is not recommended to adapt IE8.
Of course, giant Internet portals like Baidu can even work with IE6. Although there is a certain degree of experience downgrading, this is involved in other aspects of knowledge.
Secondly, it is recommended to persuade customers to upgrade the browser, if it is based on the operating system, such as Windows XP. You can install Google or 360, both of which are good choices.
And you might say, well, if I can convince the client why am I clicking in,
Oh, there’s something to be said. Fight for it.
The combination of IE8 + MVVM is actually not a very good solution, just a compromise solution, so:
If you are doing pure page display, I recommend server rendering, good performance, if facing the Internet is also more conducive to SEO
I recommend static page + jquery + XXXUi combination, small volume, fast rendering, single page development and maintenance clear and convenient.
But if your page contains a lot of logic, causality, complex forms, component reuse, etc., consider this option.
This program is based on the actual situation of the individual to do the selection, deviation and deficiencies are also expected to be tolerated
Technology selection
The framework
Search Github by looking it up. There are plenty of MVVM frameworks for IE8, such as Angular1, Avalon, YoxJS and SAN
Therefore, in the selection of SHADOW, the following points are mainly considered
- Whether open source
- Long-term maintenance
- Integrity and readability of API documentation
- Whether the surrounding ecology is intact
Whether open source
Open source can ensure that if you encounter problems, you can gradually find problems through the source code. If you have the ability, you can also submit an issue to help it improve.
Open source can reduce the amount of time you spend scratching your head by finding problems that others have already encountered in an issue.
Of course, the MVVM framework for IE8 that can be found online in 2020 is basically open source
Long-term maintenance
Which one do you prefer, individual developers or Google/Alibaba/Baidu open source technology frameworks?
I will definitely choose the latter. There are technical support and practical cases, as can be seen from the number of STARS in each project.
As an aside, this is not a personal/small project to consider at all, as long as you can handle it
But if it is an enterprise selection, it needs to be carefully considered. If open source authors suddenly stop maintaining them (and there are a lot of them), subsequent updates and bug fixes can be a headache
In the process of looking for information, I found that there are still people arguing about React and VUE in 2020, claiming that VUE is personal maintenance.
In fact, THE development of VUE to today is not a personal maintenance project, there is a considerable community system.
Integrity and readability of API documentation
To be honest, the most comfortable document I’ve seen so far is Vue’s official documentation, which is concise, orderly, and well structured.
Of the frameworks listed above, YoxJS is the better and very clean
As an added bonus, it borrows syntax features from Vue2.0, which will be very familiar to those familiar with Vue
Angular1 is no longer maintained, avalon is no longer maintained due to author reasons, SAN is open source for Baidu, but the documentation is in general, it has a very jumpy feel
The surrounding ecological
When you decide you need to use MVVM, the surrounding ecology becomes very important
In the early days, basic functionality is enough, but as requirements increase and functionality needs to be extended, requirements such as state management, routing, and component modularization will follow.
Older or no longer maintained technical frameworks cannot be satisfied in this regard
Yoxjs is currently in the initial stable stage, with only routing in the surrounding ecology
SAN is the most complete word SHADOW can find so far
There are SAN-store for state management, SAN-Router for routing, SAN-SSR for server rendering, and SAN-Loader supported by modular development
The project is not big. In fact, yOXJS can be considered. It is light and convenient, and the basic functions can be satisfied
After comprehensive consideration of the above points, choose Baidu San
Baidu open source, full documentation and Friendly Chinese, sufficient surrounding ecology to meet common needs, development kit is also relatively complete, can better do modular split
UI
The two main Mvvm solutions have mature UI suites, such as React + Ant-Design and Vue + Element-UI
There is no readily available solution for SAN, and the two UI projects surrounding SAN official documentation, Santd and SAN-MUi, are not compatible with IE8.
That leaves only two options:
Write all the UI styles yourself
Two, to find a match IE8 front-end library, I choose this one
The final choice is Bootstrap, which itself is based on CSS and can be used without JS. Version 2.3.2 also has good support for IE.
Network request
Jquery 或者 axios
If you use jquery plugins or functions, you can use jquery Ajax directly. Version 1.12.4 is 97K in size
If you only need network requests you can use Axios for a smaller size (<17K)
Code demo
San is easy to get started with, and here is an online demonstration of bidirectional binding
San-loader can be used in Webpack to load.san files, as shown in the following example
<template> <fregement> <p> {{ name }} </p> <input value="{= name =}"> </fregement> </template> <script> export default { initData() { return { name: 'hello world' } } } </script>Copy the codeInitialization projects can be easily built using SAN-CLI, as described in the official documentation
Then, with a little more detail, you can make a simple form
Contrast with Chrome
You can see that the rendering is pretty much the same, except for IE8’s sharper fonts and the angular buttons and borders that are not supported by CSS3’s box-shaodw and border-radius
Matters needing attention
CSS3 rounded corners, shadows
Css3pie is a CSS enhancement plug-in for IE6-9
Server push solution
There are two kinds of server-side push solutions on the Web
- Push mode based on Websocket
- Poll mode based on WebWorker
Neither of these solutions is supported in IE8, so you need to use another solution, which is Flash
Web-socket-js is a Websocket implementation based on Flash.
Note that since it is actually implemented by Flash and JS bridge, Flash cross-domain support should be added if cross-domain support occurs
For details, please refer to the official document Flash Socket policy file
Afterword.
The project has been online for half a year and is in good condition