Vue.js is boring(And that’s a good thing)

Joonas Lehtonen |

Boring intro to Vue.js

“Vue.js is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API”

source: github.com/vuejs/vue

Why should you care about Vue.js?

•Maybe you we’re disappointed with Angular 2•Maybe you think React is overly complex for most use cases•Maybe you just want to see what all the hype is about

Let’s talk aboutDependencies

(and bash React)

Your average React starter kit• classnames• immutable• react• react-dom• react-redux• redux• redux-devtools• redux-devtools-extension• redux-form

• redux-immutable• redux-saga• redux-thunk• react-router• react-router-dom• react-router-redux• react-router-scroll• reselect• styled-components

export default function configureStore(initialState = {}, history) {

const middlewares = [sagaMiddleware,routerMiddleware(history),

];

const enhancers = [applyMiddleware(...middlewares),

];

const composeEnhancers =process.env.NODE_ENV !== 'production'

&&typeof window === 'object' &&window.__REDUX_DEVTOOLS_EXTENSION_COMPO

SE__ ?window.__REDUX_DEVTOOLS_EXTENSION_COM

POSE__ : compose;/* eslint-enable */

finalCreateStore = compose(applyMiddleware(...middleware),window.devToolsExtension ? window.devToolsExtension() :

DevTools.instrument(),persistState(window.location.href.match(/[?&]debug_session=([^&

]+)\b/)))(_createStore);

} else {finalCreateStore = applyMiddleware(...middleware)(_createStore);

}

const reducer = require('./modules/reducer');if (data) {

data.pagination = Immutable.fromJS(data.pagination);}const store = finalCreateStore(reducer, data);

if (__DEVELOPMENT__ && module.hot) {module.hot.accept('./modules/reducer', () => {

store.replaceReducer(require('./modules/reducer'));});

}

return store;

250 lines of boilerplate

Your average boring Vue.js starter kit

•vue•vuex•vue-router

Let’s talk aboutTemplates

(and bash Angular 2)

How you shouldn’t do templating

Vue.js - The boring approach to templating

But I want to use JSX!

No worries, you can use JSX when you need to

Think of templates as an alternative way to declare your render functions

”But doesn’t that mean I have to separate my component’s logic from its presentation?”

Introducing Single File Components

Let’s talk aboutReactivity

(and not bash anyone this time)

React developer, what if I told you…

•…that you wouldn’t have to write a single shouldComponentUpdate function ever again• ...that you wouldn’t have to spend any more time thinking how to optimize component rendering

Reactivity in Vue.js

source:https://vuejs.org/v2/guide/reactivity.html

DEMO

This team should probably use Vue.js

Frontend dev 2x Junior devsBackend dev

This team can probably live without Vue.js

3x Hardcore React devs

Summary

Vue.js steals borrows best ideas from other libraries

It’s not as interesting as some other alternatives(you might even call it boring)

But it helps you and your team get the job done

To get started

npm install –g vue-clivue init webpack-simple

Official documentation is very good.https://vuejs.org

Any questions?