Group:

Petty and Low Group

Catalog

• Bootstrap
• Pros of Bootstrap
• Cons of Bootstrap
• Vue.js
• Pros of Vue.js
• Cons of Vue.js
• Features
• Analysis of market share and popularity
• An interesting project : BootstrapVue
• Summary
• Reference

Vue.js vs Boostrap

Overview

Bootstrap

Simple and flexible HTML, CSS, and JS for popular UI components and interactions. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web;

Bootstrap can be classified as a tool in the "Front-End Frameworks" category.

Pros of Bootstrap

1. Grid system (structure)

One of the advantages of BT is that you can adjust the page according to the user's screen size, so that it performs well in all sizes.

2. CSS modularity (performance)

BT pre-defines a lot of CSS classes. When you use it, you can directly assign the corresponding class name to the class, such as text-left, text-align, .table, etc. The most representative is the btn class. BT defines a basic class of .bt. If you want other styles, you can expand on this basic class to achieve different visual effects.

3. JavaScript plugin (interactive)

BT's JavaScript plug-in is very rich, it can be used with existing or self-expanding. BT provides an integrated version of BT.js, which can be used directly or imported into * .js individually. The good thing about the JS plugin is that even developers who do n’t understand JS can use it, as long as it is written in the format provided by the official documentation, such as the modal box, as long as the class, data-toggle, data-target are set as required But, there is no need to write a sentence of JS, which is very convenient

Cons of Bootstrap

1. Insufficient compatibility BT sets all element box models to border-box, which is a box model in IE promiscuous mode, which makes it incompatible with IE. In addition, a large number of H5 tags and CSS3 grammars are also used. There is also a small problem with the compatibility of these grammar tags

2. The style is more fixed Because BT defines a lot of CSS classes in advance, you can directly assign the corresponding class name to the class when you use it, so if you have your own special needs, you need to re-customize the style. If there are a lot of non-bootstrap "styles" in a website Styles exist, then you need to do a lot of css rewriting, so you lose the meaning of using frames.

Vue.js

Reactive Components for Modern Web Interfaces. Vue.js is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

Vue.js is grouped under "Javascript UI Libraries".

Pros of Vue.js

1. Two-way data binding

This is the so-called responsive data binding. Responsive here is not a responsive layout in @media Query, but it means that vue.js will automatically respond to changes in certain data on the page.

In other words, vue.js will automatically respond to changes in data, and modify all data and view content bound together according to the binding relationship pre-written by the user in the code. And this binding relationship is declared by the v-model attribute of the input tag, so you may also see someone else roughly calling vue.js as a template engine for declarative rendering.

This is the biggest advantage of vue.js. The two-way binding of data is realized through the idea of MVVM, so that developers no longer need to manipulate dom objects and have more time to think about business logic.

2. Component development

In front-end applications, can we also encapsulate modules like programming? This introduces the idea of component development.

Vue.js uses components to split the various modules in a single-page application into a single component. We only need to write the various component labels in the parent application (occupying the pit), and in Write the parameters of the component to be written in the component label (just like passing parameters to the function, this parameter is called the property of the component), and then write the implementation of various components (fill the hole), and then the entire application is finished .

3. Higher operating efficiency

Vue.js uses the virtual Dom technology. The virtual Dom technology calculates the state that the DOM needs to show in the last step in the JavaScript memory, and then tells the browser to render this state. Greatly improve the performance of data views and the experience of front-end users.

4. Rich resources and fast learning

The Vue community is very popular, with all kinds of UI components, animation effects, and ready-made Demos, which can be used directly to achieve rapid project development.

Cons of Vue.js

1. In order to catch up with the existing framework, Vue has given Vuex and VueRouter the official supporting technical solutions for the entire ecological environment. This is a good thing, but if we look for other frameworks that can replace Vuex and VueRouter, the requirements are more popular, the files are complete, the update frequency is faster and there are tutorials, you will find none. So Vue currently lacks a "second choice".

2. Vue does not lack introductory tutorials, but it lacks high-level tutorials and documentation. There are also books.

3. There are N ways to write the same set of requirements with Vue. It is easy to cause maintenance difficulties caused by inconsistent code styles.

4. Less Plugins/Components

Common plugins are useful as they work with various other tools to make development easy. Vue.js does not have most of the common plugins, and that is the drawbacks of Vue.js.

5. Vue.js Evolving Fast

What is working in Vue today may be outdated tomorrow. This is the most significant drawbacks of Vue as developers find it is rather complicated, and they have to learn the framework quite frequently.

6. Issues with iOS & Safari

If you are using Vue.js app on older version iOS and Safari, then you are supposed to get some problems, though they are fixable.

7. Small Community

Vue was initially launched in 2014, and therefore it is still new and evolving very fast. As a result, it is not so popular compared to other frameworks such as React and Angular. Besides, as a Chinese company has created the framework, most of the code has been written in the Chinese language, which creates some issues for English speaking users. Most of the members in the community are non-English speakers that too in small numbers which may not be supportive.

8. More Flexible than Needed

Flexibility is excellent, but it’s not always good as when you are working on some more significant projects in which developers are involved, then it will create some issues. Over-flexibility causes more errors and irregularity within the code. More errors and irregularity means, projects will get delayed.

Features

Bootstrap

• Preprocessors: Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.
• One framework, every device: Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
• Full of features: With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.

Vue.js

• Reactivity
• Components
• Modularity

"Responsiveness", "UI components" and "Consistent" are the key factors why developers consider Bootstrap; whereas "Simple and easy to start with", "Good documentation" and "Components" are the primary reasons why Vue.js is favored.

Analysis of market share and popularity

Bootstrap and Vue.js are both open source tools. Vue.js with 143K GitHub stars and 20.7K forks on GitHub appears to be more popular than Bootstrap with 134K GitHub stars and 66K GitHub forks.

According to the StackShare community, Bootstrap has a broader approval, being mentioned in 7044 company stacks & 1115 developers stacks; compared to Vue.js, which is listed in 849 company stacks and 1219 developer stacks.

And here are some market share data of Bootstrap and Vue.js

An interesting project : BootstrapVue

BootstrapVue, With more than 85 components, over 45 available plugins, several directives, and 500+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4.4 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup. With BootstrapVue you can build responsive, mobile-first, and ARIA accessible projects on the web using Vue.js and the world's most popular front-end CSS library — Bootstrap v4.

Summary

Bootstrap is a simple, intuitive and powerful front-end development framework based on HTML, CSS and JavaScript developed by Mark Otto and Jacob Thornton, designers of American twitter company, which makes web development faster.

Vue is a set of progressive JavaScript framework for building user interface. Unlike other large frameworks, Vue is designed to be applied layer by layer from bottom to top. Vue's core library only focuses on visual layers, which facilitates integration with third-party libraries or existing projects.

BootStrap:

It is characterized by grid system, simple to use and easy to use. It is specially produced for responsive pages. A set of code can adapt to tablet and PC. The disadvantage is that there is a lack of a set of powerful and systematic components. When you actually use it, there may be a problem of scope conflict. If you don't sort out a complete set of components, the development is very tired

Vue.js:

The characteristic is that standing on the shoulder of react, many aspects are better
The disadvantage is that it is difficult to start, and large-scale development requires systematic development accumulation

In the long run, Vue is recommended. In the short run, bootstrap is a good choice.

Reference

https://github.com/twbs/bootstrap

https://v3.bootcss.com/

https://www.php.cn/bootstrap/425684.html

https://github.com/vuejs/vue

https://vuejs.org/