5 of the best JavaScript frameworks

综合技术 Creative Bloq (源链)

The best JavaScript frameworks make coding faster and easier, so you can focus on designing the perfectwebsite layout – instead of becoming bogged down in code. A number of great ones have popped up on the market in recent years.

In this article, we’ll take a look at the biggest and best JavaScript frameworks around, and explore how to get the best out of them for your next projects. We’ll look at Vue.js, React, AngularJS, Polymer and Aurelia – you can use the drop-down menu above to jump to the framework you want to explore first.

Most of these frameworks areopen source projects, too, so you can dig in and see how they work – or even contribute yourself.


Best for:

  • Beginners
  • Lightweight applications with a small footprint

Vue.js is a progressive JavaScript framework for building user interfaces. An open source project (see the GitHub repo here ), its ideal for beginners. The main library is focused on the view layer and all templates are valid HTML, making it easy to pick up. In the following two mini-tutorials, we’ll walk through how to use Vue to manage multiple data stores, and speed up the first load to improve your site’s performance.

01. Manage state with Vue

As with any component-based library, managing state in Vue can be tricky. While the application is small, it’s possible to keep things in sync by emitting events when values change. However, this can become brittle and prone to errors as the application grows, so it may be better to start out with a more centralised solution.

If you’re familiar with Flux and Redux, Vuex works in much the same way. State is held in one centralised location and is linked to the main Vue application. Everything that happens within the application is reflected somewhere within that state. Components can select what information is relevant to them and be notified if it changes, much like if it was part of its internal state.

A Vuex store is made up of four things: the state, getters, mutations and actions. The state is a single object that holds all the necessary data for the entire application. The way this object gets structured depends on the project, but would typically hold at least one value for each view.

Getters work like computed properties do inside components. Their value is derived from the state and any parameters passed into it. They can be used to filter lists without having to duplicate that logic inside every component that uses that list.

The state cannot be edited directly. Any updates must be performed through mutation methods supplied inside the store. These are usually simple actions that perform one change at a time. Each mutation method receives the state as an argument, which is then updated with the values needed to change.

Mutations need to be synchronous in order for Vuex to understand what has changed. For asynchronous logic – like a server call – actions can be used instead. Actions can return Promises, which lets Vuex know that the result will change in the future as well as enabling developers to chain actions together.

To perform a mutation, they have to be committed to the store by calling commit() and passing the name of the mutation method required. Actions need to be dispatched in a similar way with dispatch() .

It’s good practice to have actions commit mutations rather than commit them manually. That way, all updating logic is held together in the same place. Components can then dispatch the actions directly, so long as they are mapped using the mapActions() method supplied by Vuex.

To avoid overcomplicating things, the store can also be broken up into individual modules that look after their own slice of the state. Each module can register its own state, getters, mutations and actions. State is combined between each module and grouped by their module name, in much the same way as combineReducers() works within Redux.pport .

02. Explore lazy load routes

By default, the entire contents of the application end up inside one JavaScript file, which can result in a slow page load. A lot of that content is never used on the first screen the user visits. Instead it can be split off from the main bundle and loaded in as and when needed.

Vue makes this process incredibly simple to set up, as vue-router has built-in support for lazy loading.

const AsyncAbout = () => import('./About.vue');
const router = new VueRouter({
  routes: [
    { path: '/about, component: AsyncAbout }
] })

Vue supports using dynamic imports to define components. These return Promises, which resolve to the component itself. The router can then use that component to render the page like normal. These work alongside code splitting built in to Webpack, which makes it possible to use features like magic comments to define how components should be split.

Next page: React


vue之小型应用form表单提交【原创】 helloVue var vm = new Vue({ el: ‘.helloVue’, data(){ return{ inputtext:{} } }, m...
为什么使用v-for时必须添加唯一的key? 使用 v-for 更新已渲染的元素列表时,默认用 就地复用 策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们在使用的使用经常会使用 index (即数组的下标)来作为 key ,但其实这是不推荐的一种使用...
Vue.js vs React.js: Can Any Of Two Frameworks Lead... 原文出处 Vue.js vs React.js: Can Any Of Two Frameworks Lead In UI Development? Vue.js vs React.js: Can Any Of Two Frameworks Lead In UI Developme...
Methods, Computed, and Watchers in Vue.js One of the reasons I love working with Vue is because of how useful methods , computed , and watchers are, and the legibility of their disti...
What Is Vue.js? What is Vue.js? In short, it's a progressive framework for building user interfaces using HTML and JavaScript. If you'd like a more detailed explanat...
Creative Bloq责编内容来自:Creative Bloq (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 5 of the best JavaScript frameworks

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录