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)

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

PDF
"Vue.js или как наконец отказаться от React"
PDF
Архитектурные решения при создании облачного сервиса на Asp.Net
PDF
Реактивный фронтенд фреймворк для людей (Константин Комелин)
PPTX
AngularJS2 vs VueJS2 (ru)
PDF
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
PPTX
Что нового в Visual Studio 2015
PPTX
AngularJS. Введение и простые примеры для понимания
PPTX
Евгений Остапчук "Tips&Tricks for ASP.NET MVC performance"
PDF
Как перейти с двухзвенной архитектуры Desktop приложения на трехзвенную за од...
PDF
ReactJS: Свет в конце тоннеля
PDF
FrontTalks: Алексей Андросов (Яндекс), «Ошибки, которые мы любим»
PPTX
Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi
PDF
MVC in JavaScript
PPTX
Aspect Oriented Programming and Design Patterns
PPTX
AOP and Design Patterns (GoF)
PPTX
AngularJS
PDF
Ember.js - Назад в Будущее - Odessa JS 2014
PDF
13 октября, DEV {web} - конференция о Highload веб-разработке. "Java под нагр...
PDF
Сергей Константинов — Что интересного готовит нам W3C
"Vue.js или как наконец отказаться от React"
Архитектурные решения при создании облачного сервиса на Asp.Net
Реактивный фронтенд фреймворк для людей (Константин Комелин)
AngularJS2 vs VueJS2 (ru)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Что нового в Visual Studio 2015
AngularJS. Введение и простые примеры для понимания
Евгений Остапчук "Tips&Tricks for ASP.NET MVC performance"
Как перейти с двухзвенной архитектуры Desktop приложения на трехзвенную за од...
ReactJS: Свет в конце тоннеля
FrontTalks: Алексей Андросов (Яндекс), «Ошибки, которые мы любим»
Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi
MVC in JavaScript
Aspect Oriented Programming and Design Patterns
AOP and Design Patterns (GoF)
AngularJS
Ember.js - Назад в Будущее - Odessa JS 2014
13 октября, DEV {web} - конференция о Highload веб-разработке. "Java под нагр...
Сергей Константинов — Что интересного готовит нам W3C

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