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

What's hot (19)

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

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

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

More from Binary Studio (20)

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

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