SlideShare a Scribd company logo
ke frontend development Great Ag
Vue.js
2017
Немного обо мне
▸CTO/ Architect at
Crello(crello.com)
▸Пишу на js с 2012 года
▸Человек-оркестр
▸Люблю всё новое
Грачёв Андрей
О чём будем говорить
• Кто виноват?
• Фронтенд сегодня
• Что делать?
Но немного истории
2006
2010
2012
2013
??
2017
Что же выбрать в 2017?
Convention
Configuration
Redial
Redux-saga
Immutable.js
Postcss modules
Classnames
SubmitJS: Vue.js - make frontend developement great again. Andrii Grachov
Configuration > convention
Typescript
Dependency
injection
AngularCLI
AOT
Too much convention!
SubmitJS: Vue.js - make frontend developement great again. Andrii Grachov
Evan You
56k Stars
~30kb gzipped
Moderate convention
Moderate configuration
Что же это такое?
Компоненты
Virtual DOM
MVVM Bindings
Скорость
React
Удобство
Angular
Как это запустить?
Vue-CLI Вручную
Как выглядит шаблон на Vue
<template>
<div class="list-container">
<ul v-if="items.length">
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
<p v-else>No items found.</p>
</div>
</template>
Как выглядит CSS
CSS VUE
Block scoped CSS
<style scoped>
.active {
background-color: '#000000'
}
</style>
<template>
<div v-bind:class="{ active: isActive }">
</div>
</template>
всё это уже где-то видел, зачем мне Vu
Рендеринг
Dependency collector
Virtual DOM
Batched updates
SubmitJS: Vue.js - make frontend developement great again. Andrii Grachov
SubmitJS: Vue.js - make frontend developement great again. Andrii Grachov
Простота разработки
Коробочные решения
Vuex
Vue router
Vue-loader
renderToStream
Кто использует?
А как же Native ?
SubmitJS: Vue.js - make frontend developement great again. Andrii Grachov
Почему Плохо
▸ Очень слабо развитая
экосистема
▸ Китайское коммьюнити
SubmitJS: Vue.js - make frontend developement great again. Andrii Grachov

More Related Content

PDF
Скриншоты как сервис
PPTX
WebGL - создание 3D графики в браузере
PPTX
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
PPTX
nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...
PPTX
Виталий Ратушный "Vue: webcomponents"
PDF
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
PPT
External Widgets Performance
PDF
Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.
Скриншоты как сервис
WebGL - создание 3D графики в браузере
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...
Виталий Ратушный "Vue: webcomponents"
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
External Widgets Performance
Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.

What's hot (19)

PDF
Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Гал...
PPTX
Игорь Лабутин «Продвинутое использование NuGet и MSBuild»
PDF
Tizen Mobile Application Lifecycle by Kirill Danilov
PDF
Рендеринг может больше: vue.js vs React, Андрей Солодовников
KEY
PDF
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
PDF
Desktop app based on node js and html5
PDF
Ivan Shirokov
PDF
Vue.js - реактивный фронтенд фреймворк для людей
PDF
По-настоящему ВИЗУАЛЬНОЕ построение лендинг-страниц на WP Gutenberg!
PPTX
Secr15 разработка кросс платформенных десктоп приложений nw.js
PDF
State of the Standardized Web
PDF
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
PDF
FrontendLab: Meteor js: Быть или не Быть- Александр Биденко
PDF
ChocoDevDay — Grunt - Advanced Tips (NIkita Bayev)
PDF
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
PPTX
Как правильно делать анимацию и добиться 60fps на различных девайсах | Odessa...
PDF
Быстрый рендеринг с DOM шаблонизаторами / Борис Каплуновский (aviasales.ru)
Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Гал...
Игорь Лабутин «Продвинутое использование NuGet и MSBuild»
Tizen Mobile Application Lifecycle by Kirill Danilov
Рендеринг может больше: vue.js vs React, Андрей Солодовников
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
Desktop app based on node js and html5
Ivan Shirokov
Vue.js - реактивный фронтенд фреймворк для людей
По-настоящему ВИЗУАЛЬНОЕ построение лендинг-страниц на WP Gutenberg!
Secr15 разработка кросс платформенных десктоп приложений nw.js
State of the Standardized Web
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
FrontendLab: Meteor js: Быть или не Быть- Александр Биденко
ChocoDevDay — Grunt - Advanced Tips (NIkita Bayev)
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
Как правильно делать анимацию и добиться 60fps на различных девайсах | Odessa...
Быстрый рендеринг с DOM шаблонизаторами / Борис Каплуновский (aviasales.ru)
Ad

Similar to SubmitJS: Vue.js - make frontend developement great again. Andrii Grachov (17)

PDF
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
PDF
"Vue.js или как наконец отказаться от React"
PDF
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
PDF
Le-go-go или как мы делаем медийные сайты.
PDF
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
PDF
Архитектура фронтенда и дизайн-системы
PDF
Фронтенд для миллионов (Орёл)
PDF
От заката до рассвета | Максим Безуглый | Zlit Tech
PDF
Meet Magento Belarus 2015: Denis Bosak
PDF
Фреймворки: недалёкое прошлое и ближайшее будущее
PDF
JavaScript сегодня: React, Redux и новая реальность
PDF
Денис Измайлов, JavaScript сегодня: React, Redux и новая реальность
PDF
"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evrone
PDF
Фреймворки: Недалёкое Прошлое и Ближайшее Будущее
PDF
Javascript-фреймворки:
 должен остаться только один
PDF
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
PDF
2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
"Vue.js или как наконец отказаться от React"
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
Le-go-go или как мы делаем медийные сайты.
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
Архитектура фронтенда и дизайн-системы
Фронтенд для миллионов (Орёл)
От заката до рассвета | Максим Безуглый | Zlit Tech
Meet Magento Belarus 2015: Denis Bosak
Фреймворки: недалёкое прошлое и ближайшее будущее
JavaScript сегодня: React, Redux и новая реальность
Денис Измайлов, JavaScript сегодня: React, Redux и новая реальность
"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evrone
Фреймворки: Недалёкое Прошлое и Ближайшее Будущее
Javascript-фреймворки:
 должен остаться только один
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один
Ad

More from Binary Studio (20)

PPTX
Academy PRO: D3, part 3
PPTX
Academy PRO: D3, part 1
PPTX
Academy PRO: Cryptography 3
PPTX
Academy PRO: Cryptography 1
PPTX
Academy PRO: Advanced React Ecosystem. MobX
PPTX
Academy PRO: Docker. Part 4
PPTX
Academy PRO: Docker. Part 2
PPTX
Academy PRO: Docker. Part 1
PPTX
Binary Studio Academy 2017: JS team project - Orderly
PPTX
Binary Studio Academy 2017: .NET team project - Unicorn
PPTX
Academy PRO: React native - miscellaneous
PPTX
Academy PRO: React native - publish
PPTX
Academy PRO: React native - navigation
PPTX
Academy PRO: React native - building first scenes
PPTX
Academy PRO: React Native - introduction
PPTX
Academy PRO: Push notifications. Denis Beketsky
PPTX
Academy PRO: Docker. Lecture 4
PPTX
Academy PRO: Docker. Lecture 3
PPTX
Academy PRO: Docker. Lecture 2
PPTX
Academy PRO: Docker. Lecture 1
Academy PRO: D3, part 3
Academy PRO: D3, part 1
Academy PRO: Cryptography 3
Academy PRO: Cryptography 1
Academy PRO: Advanced React Ecosystem. MobX
Academy PRO: Docker. Part 4
Academy PRO: Docker. Part 2
Academy PRO: Docker. Part 1
Binary Studio Academy 2017: JS team project - Orderly
Binary Studio Academy 2017: .NET team project - Unicorn
Academy PRO: React native - miscellaneous
Academy PRO: React native - publish
Academy PRO: React native - navigation
Academy PRO: React native - building first scenes
Academy PRO: React Native - introduction
Academy PRO: Push notifications. Denis Beketsky
Academy PRO: Docker. Lecture 4
Academy PRO: Docker. Lecture 3
Academy PRO: Docker. Lecture 2
Academy PRO: Docker. Lecture 1

SubmitJS: Vue.js - make frontend developement great again. Andrii Grachov