Slides for the presentation about Vue.js that I held at Web Dev & Sausages vol.2 w/TampereJS meetup

1. Vue.js is boring
(And that’s a good thing)
Joonas Lehtonen |

2. 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

3. 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

4. Let’s talk about
Dependencies
(and bash React)

5. 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

6. 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() :
Tools.instrument(),
persistState(window.location.href.match(/[?&]debug_session=([^&
b/))
)(_createStore);
else {
finalCreateStore = applyMiddleware(...middleware)(_createStore);
onst reducer = require('./modules/reducer');
f (data) {
data.pagination = Immutable.fromJS(data.pagination);
onst store = finalCreateStore(reducer, data);
f (__DEVELOPMENT__ && module.hot) {
module.hot.accept('./modules/reducer', () => {
store.replaceReducer(require('./modules/reducer'));
});
250 lines of boilerplate

7. Your average boring Vue.js starter kit
•vue
•vuex
•vue-router

9. Let’s talk about
Templates
(and bash Angular 2)

10. How you shouldn’t do templating

11. Vue.js - The boring approach to templating

12. But I want to use JSX!

13. No worries, you can use JSX when you need to

14. 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?”

15. Introducing Single File Components

16. Let’s talk about
Reactivity
(and not bash anyone this time)

17. 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

18. Reactivity in Vue.js
source: https://vuejs.org/v2/guide/reactivity.html

19. DEMO

20. This team should probably use Vue.js
Frontend dev 2x Junior devsBackend dev

21. This team can probably live without Vue.js
3x Hardcore React devs

22. 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

23. To get started
npm install –g vue-cli
vue init webpack-simple
Official documentation is very good.
https://vuejs.org

24. Any questions?