Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
SERP или просто страница результатов поисковой выдачи — это действительно большой проект с огромной аудиторией. Над ним работают около 40 фронтендеров из разных городов. Эта страница показывается больше 200 000 000 раз в день. При таких размерах даже модульная архитектура уже не слишком спасала нас от странных, неочевидных зависимостей, лишних стилей и нескольких разных реализаций почти одинаковых компонентов.
Процесс разработки новой, даже довольно простой на первый взгляд фичи занимал чудовищное количество времени и представлял из себя хаотичное взаимодействие большого количества людей: фронта, бэкенда, дизайнеров и менеджеров.
Стала закрадываться мысль, что пора что-то менять. И мы поменяли.
В докладе я расскажу о том, как мы с помощью проекта на стыке фронтендеров, менеджеров, и дизайнеров, навели во всем этом идеальный порядок. Каким образом поменяли наш код процессы и инструменты, а также что нам это дало, и как будем жить с этим дальше.
Если вам знакомы похожие проблемы, то наш опыт может оказаться вам чертовски полезным.
Антон Пискунов. Независимый разработчик.
«BeeGo для веб-приложений, API и демонов»
- Почему BeeGo? vs Revel and another guys.
- Что мы пишем на BeeGo? Наш личный опыт.
- Как написать облачный стартап и инфраструктурные сервисы на BeeGo за две недели.
- Sweet API, нэймспейсы и автодокументация.
- Демонизация BeeGo, к чему мы пришли?
- Разработчики, мэйнтейнинг, существующие проблемы
http://go-meetup-spb.timepad.ru/event/169777/
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Ontico
Microsoft Edge -- новый браузер от Microsoft с новым движком и новым интерфейсом.
Какие цели преследует Microsoft, и что это нововведение означает для веб-разработчиков?
Что нового в движке браузера по сравнению с IE, и как он будет развиваться дальше?
Движок Edge внутри Windows 10: хостинг сайтов внутри приложений и доступ к нативной функциональности.
Дорожная карта: к чему и когда готовиться?
Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
SERP или просто страница результатов поисковой выдачи — это действительно большой проект с огромной аудиторией. Над ним работают около 40 фронтендеров из разных городов. Эта страница показывается больше 200 000 000 раз в день. При таких размерах даже модульная архитектура уже не слишком спасала нас от странных, неочевидных зависимостей, лишних стилей и нескольких разных реализаций почти одинаковых компонентов.
Процесс разработки новой, даже довольно простой на первый взгляд фичи занимал чудовищное количество времени и представлял из себя хаотичное взаимодействие большого количества людей: фронта, бэкенда, дизайнеров и менеджеров.
Стала закрадываться мысль, что пора что-то менять. И мы поменяли.
В докладе я расскажу о том, как мы с помощью проекта на стыке фронтендеров, менеджеров, и дизайнеров, навели во всем этом идеальный порядок. Каким образом поменяли наш код процессы и инструменты, а также что нам это дало, и как будем жить с этим дальше.
Если вам знакомы похожие проблемы, то наш опыт может оказаться вам чертовски полезным.
Антон Пискунов. Независимый разработчик.
«BeeGo для веб-приложений, API и демонов»
- Почему BeeGo? vs Revel and another guys.
- Что мы пишем на BeeGo? Наш личный опыт.
- Как написать облачный стартап и инфраструктурные сервисы на BeeGo за две недели.
- Sweet API, нэймспейсы и автодокументация.
- Демонизация BeeGo, к чему мы пришли?
- Разработчики, мэйнтейнинг, существующие проблемы
http://go-meetup-spb.timepad.ru/event/169777/
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Ontico
Microsoft Edge -- новый браузер от Microsoft с новым движком и новым интерфейсом.
Какие цели преследует Microsoft, и что это нововведение означает для веб-разработчиков?
Что нового в движке браузера по сравнению с IE, и как он будет развиваться дальше?
Движок Edge внутри Windows 10: хостинг сайтов внутри приложений и доступ к нативной функциональности.
Дорожная карта: к чему и когда готовиться?
Разработка API для большого, нагруженного сервисаendeveit
Рассказ о том, что творилось с проектами kolesa.kz и krisha.kz в 2011-2012 годах и что происходит сейчас, как мы создавали с нуля API и впоследствии переезжали на него, как на лету меняли хранилища данных, как боролись с нагрузками и воевали за надежность, расскажу о граблях на которые наступили и как их можно было бы избежать.
Быстрый рендеринг с DOM шаблонизаторами / Борис Каплуновский (aviasales.ru)Ontico
1. Типы шаблонизаторов DOM/innerHTML.
2. Внутренности AngularJS и почему он тормозит.
3. Внутренности ReactJS и почему он тормозит.
4. Менее раскрученные решения Blaze/PaperclipJS/Riot и что там сделано лучше.
5. Плюсы и минусы virtualdom.
6. Работа с DOM может быть быстрее, если:
6.1 Использовать одни и те-же участки DOM несколько раз.
6.2 Сокращать количество reflow с DocumentFragment.
6.3 Быстрое создание повторяющихся участков DOM с помощью cloneNode.
6.4 Создавать куски DOM ahead of time.
7. Встречаем temple - шаблонизатор, работающий в разы быстрее reactjs и не требующий загрузки 40k библиотеки времени исполнения.
JavaScript завтра / Сергей Рубанов (Exante Limited)Ontico
За последние несколько лет в мире js-разработки особое внимание получили такие проекты как AtScript, TypeScript, SoundScript, Flow, Traceur, Babel, каждый из которых пытается предоставить разработчикам некую "улучшенную" версию JavaScript. Комитет TC39 также стал очень активен и разработал стратегию развития стандарта ECMAScript с более частыми релизами. Движки JavaScript стремительно приближаются к полной поддержке ES6. Огромное количество JS-фреймворков и библиотек выбирают следующую версию стандарта уже сегодня. Это означает, что необходимо уже сегодня обратить внимание на происходящее в мире JavaScript-разработки и разобраться, что ждет язык завтра.
В своем докладе я постараюсь дать ответы на следующие вопросы:
- почему такие фреймворки и библиотеки как Angular, Ember, React начали активно и кардинально меняться;
- почему новая версия стандарта языка ES6 так долго внедряется вендорами браузеров и как TC39 решил ускорить процесс стандартизации и внедрения последующих версий ECMAScript;
- почему CoffeeScript больше не "just JavaScript", и действительно ли он сделал такой значимый вклад в следующую версию JavaScript;
- почему были созданы AtScript, TypeScript, Flow, чем каждый из них отличается от остальных, и как они влияют на дальнейшее развитие JavaScript;
- что такое Strong Mode и SoundScript;
- как начать писать ES6+ код уже сегодня.
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...Ontico
DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.
В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.
В этом докладе:
- подходы к решению проблемы медленного DOM;
- существующие решения: react-canvas, методология Netflix;
- поиск идеального решения для оптимизации производительности;
- рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
- ограничения и рекомендации.
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...Ontico
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
Roman Romanovsky, Sergey Rak - "JavaScript в IoT "IT Event
I've been surprised how easy it is today to program hardware containing Wi-Fi module and start receiving data from a chosen sensor (those perceiving motion, light or sound, etc.). Without a line in C++, all in JavaScript solely.
Together with Sergey, we'll elaborate more on how any frontend engineer can easily jumpstart his journey within the Internet of Things.
13 октября, DEV {web} - конференция о Highload веб-разработке. "Java под нагр...IT-Portfolio
13 октября, DEV {web} - конференция о Highload веб-разработке. "Java под нагрузкой, в поисках проблем...", Филипп Дельгядо (CTO Goodwix, ex-teamlead Яндекс.Деньги)
Аннотация
Не так давно с некоторым изумлением узнал, что Java для нагруженных систем представляется совершенной terra incognita. Хотя и совершенно не хочется бороться с мифами, по крайней мере, с удовольствием расскажу, как просто и без хлопот использовать Java в вебе. Про "суровый" highload рассказывать не буду, а вот про простые решения - с удовольствием. Ну и на закуску расскажу, за что я нежно люблю блобы.
О себе
Teamlead сколько себя помню, успел поработать и в "Яндекс.Деньгах" и в "БК Марафон". Люблю простые решения, сложные задачи и хорошую коммуникацию.
Разработка API для большого, нагруженного сервисаendeveit
Рассказ о том, что творилось с проектами kolesa.kz и krisha.kz в 2011-2012 годах и что происходит сейчас, как мы создавали с нуля API и впоследствии переезжали на него, как на лету меняли хранилища данных, как боролись с нагрузками и воевали за надежность, расскажу о граблях на которые наступили и как их можно было бы избежать.
Быстрый рендеринг с DOM шаблонизаторами / Борис Каплуновский (aviasales.ru)Ontico
1. Типы шаблонизаторов DOM/innerHTML.
2. Внутренности AngularJS и почему он тормозит.
3. Внутренности ReactJS и почему он тормозит.
4. Менее раскрученные решения Blaze/PaperclipJS/Riot и что там сделано лучше.
5. Плюсы и минусы virtualdom.
6. Работа с DOM может быть быстрее, если:
6.1 Использовать одни и те-же участки DOM несколько раз.
6.2 Сокращать количество reflow с DocumentFragment.
6.3 Быстрое создание повторяющихся участков DOM с помощью cloneNode.
6.4 Создавать куски DOM ahead of time.
7. Встречаем temple - шаблонизатор, работающий в разы быстрее reactjs и не требующий загрузки 40k библиотеки времени исполнения.
JavaScript завтра / Сергей Рубанов (Exante Limited)Ontico
За последние несколько лет в мире js-разработки особое внимание получили такие проекты как AtScript, TypeScript, SoundScript, Flow, Traceur, Babel, каждый из которых пытается предоставить разработчикам некую "улучшенную" версию JavaScript. Комитет TC39 также стал очень активен и разработал стратегию развития стандарта ECMAScript с более частыми релизами. Движки JavaScript стремительно приближаются к полной поддержке ES6. Огромное количество JS-фреймворков и библиотек выбирают следующую версию стандарта уже сегодня. Это означает, что необходимо уже сегодня обратить внимание на происходящее в мире JavaScript-разработки и разобраться, что ждет язык завтра.
В своем докладе я постараюсь дать ответы на следующие вопросы:
- почему такие фреймворки и библиотеки как Angular, Ember, React начали активно и кардинально меняться;
- почему новая версия стандарта языка ES6 так долго внедряется вендорами браузеров и как TC39 решил ускорить процесс стандартизации и внедрения последующих версий ECMAScript;
- почему CoffeeScript больше не "just JavaScript", и действительно ли он сделал такой значимый вклад в следующую версию JavaScript;
- почему были созданы AtScript, TypeScript, Flow, чем каждый из них отличается от остальных, и как они влияют на дальнейшее развитие JavaScript;
- что такое Strong Mode и SoundScript;
- как начать писать ES6+ код уже сегодня.
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...Ontico
DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.
В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.
В этом докладе:
- подходы к решению проблемы медленного DOM;
- существующие решения: react-canvas, методология Netflix;
- поиск идеального решения для оптимизации производительности;
- рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
- ограничения и рекомендации.
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...Ontico
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
Roman Romanovsky, Sergey Rak - "JavaScript в IoT "IT Event
I've been surprised how easy it is today to program hardware containing Wi-Fi module and start receiving data from a chosen sensor (those perceiving motion, light or sound, etc.). Without a line in C++, all in JavaScript solely.
Together with Sergey, we'll elaborate more on how any frontend engineer can easily jumpstart his journey within the Internet of Things.
13 октября, DEV {web} - конференция о Highload веб-разработке. "Java под нагр...IT-Portfolio
13 октября, DEV {web} - конференция о Highload веб-разработке. "Java под нагрузкой, в поисках проблем...", Филипп Дельгядо (CTO Goodwix, ex-teamlead Яндекс.Деньги)
Аннотация
Не так давно с некоторым изумлением узнал, что Java для нагруженных систем представляется совершенной terra incognita. Хотя и совершенно не хочется бороться с мифами, по крайней мере, с удовольствием расскажу, как просто и без хлопот использовать Java в вебе. Про "суровый" highload рассказывать не буду, а вот про простые решения - с удовольствием. Ну и на закуску расскажу, за что я нежно люблю блобы.
О себе
Teamlead сколько себя помню, успел поработать и в "Яндекс.Деньгах" и в "БК Марафон". Люблю простые решения, сложные задачи и хорошую коммуникацию.
Преподаватель программы обучения «HTML-верстка», технический директор digital-агентства PLUS8 Дмитрий Демидовский составил для «Нетологии» словарь из 21 термина, с помощью которых вы сможете лучше понимать разработчиков.
Using Templates to Achieve Awesomer ArchitectureGarann Means
Templates are the best kind of tool: simple to write and implement, but powerful enough to make your architecture slicker and your code leaner. Getting markup out of your Javascript is a huge deal, but templates can help with more than that. They can manage repeated code snippets, allow you to deftly switch states in single page applications, and help keep your code DRY when supporting users with and without Javascript enabled. Using and extending them creatively can make any architecture a little awesomer.
“Много кода - много проблем” - истина, знакомая каждому разработчику. Мы поговорим о модульности в Javascript, средствах автоматизированной сброки, оптимизации и кешировании, обсудим Webpack - гибкий и мощный инструмент, который поможет любому front-end разработчику в решении большинства рутинных задач.
Опыт использования Webpack в реальных проектах и почему он нужен именно Вам.
James Kyle is a member of the Babel team and a UI Engineer at CloudFlare.
In this talk he'll walk through how Babel is designed from the ground up.
Then a quick dive into how you can use it to create custom tooling that will help you write better software.
Есть такая штука как инструментирование кода. Мало кто знает о ней, даже пользуясь результатами ее применения. Между тем, с инструментированием можно делать много всего интересного и, главное, полезного. Например, это может вам помочь лучше понять код или сделать процесс разработки более эффективным. Примеры инструментирования кода и принципы его работы.
Подводные камни, костыли и полученный опыт.
В первую очередь, рассказ ориентирован на тех, кто хочет заменить сборку Грантом или Гальпом на вебпак. Я рассмотрю тонкости настройки и необычные проблемы, с которыми мы столкнулись, ибо стандартные ситуации хорошо описаны на просторах интернета.
#KharkivJS 2015, Харьков
- Мои впечатления от Webpack.
- Рассказ о его принципах работы.
- Интересные фишки Webpack 1 и 2.
- Что еще есть аналогичного и выводы.
An introduction to webpack module bundler with 3 real application examples (https://github.com/ilmente/webpack-devtalk). Extracted from my Webpack // Antelope devtalk (https://www.periscope.tv/w/1rmxPpzWbwmxN) at Project A Ventures in Berlin.
Webpack - Czym jest webpack i dlaczego chcesz go używać? - wersja krótkaMarcin Gajda
Narzędzia takie jak Grunt i Gulp są coraz częściej wypierane z użycia przez swojego następce, webpacka. Wynika to z prostego powodu – w kwestii pakowania assetów rozwiązuje on domyślnie wiele problemów, z którymi tamte narzędzia radzą sobie gorzej. Ta prezentacja omawia te zagadnienia i pokazuje jak skonfigurować webpacka od zera.
Presentation from UppsalaJS, November 3, 2016.
Together we built a Javascript app and explored many parts of Webpack and how we can use Webpack to create production ready code as well as use it to help with our development.
От пояса с инструментами к полноценной лабораторииYandex
От пояса с инструментами к полноценной лаборатории
Постпроцессоры, SVG, автоматизация разработки и тестирования, эксперименты в браузере, живое документирование и многое другое.
Роман Комаров, Яндекс
Разработчик интерфейсов. В Яндексе с 2009 года, отвечает за вёрстку Яндекс.Почты. Экспериментирует над вёрсткой, интересуется фронтендом, ищет способы писать код быстро и качественно. Является мейнтейнером CSS-препроцессора Stylus.
JavaScript сегодня: React, Redux и новая реальностьDenis Izmaylov
2016 год. Добро пожаловать в новую реальность.
Сегодня позиция JavaScript-разработчика является одной из самых востребованных и хорошо оплачиваемых в мире. Современные возможности JavaScript - это квестистенция всего, что произошло в отрасли разработки за всё её время существования: универсальные React-компоненты и композиция, декларативная анимация, изоморфные приложения, отсутствие side effects, авто-генерация тестов, симбиоз ООП и функционального программирования.
Последние три года выдались самые насыщенные революционные для веб-разработки. Многие разработчики, кто не успел уследить за произошедшим, задают лишь один вопрос ЧТО ПРОИСХОДИТ?
В рамках этого доклада мы попробуем синхронизироваться с JavaScript сообществом и посмотреть, что же он предоставляет нам сегодня? Как решать задачи привычные задачи? Что является актуальным направлением, а что может стать пустой тратой сил и времени?
Денис Измайлов, JavaScript сегодня: React, Redux и новая реальностьScrumTrek
2016 год. Добро пожаловать в новую реальность.
Сегодня позиция JavaScript-разработчика является одной из самых востребованных и хорошо оплачиваемых в мире. Современные возможности JavaScript - это квестистенция всего, что произошло в отрасли разработки за всё её время существования: универсальные React-компоненты и композиция, декларативная анимация, изоморфные приложения, отсутствие side effects, авто-генерация тестов, симбиоз ООП и функционального программирования.
Последние три года выдались самые насыщенные революционные для веб-разработки. Многие разработчики, кто не успел уследить за произошедшим, задают лишь один вопрос ЧТО ПРОИСХОДИТ?
В рамках этого доклада мы попробуем синхронизироваться с JavaScript сообществом и посмотреть, что же он предоставляет нам сегодня? Как решать задачи привычные задачи? Что является актуальным направлением, а что может стать пустой тратой сил и времени?
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Yandex
Рассказ о том, что представляет собой наш «станок» верстальщика сегодня. Рассказывается с примерами, какие браузеры поддерживаем, как производим кроссбраузерное тестирование и какие инструменты используем, готовя проект к выходу в свет.
Рано или поздно возникает необходимость в собственных инструментах по разным причинам: либо не хватает готовых, либо есть какая-то особенность в проекте. Разработка инструментов, работающих в браузере, является непростой задачей. Самое сложное — чтобы они умели работать удаленно, вне страницы. Это многих пугает — нужно много сделать и во многом разобраться. Но если большая часть проблем уже решена, и можно сосредоточиться лишь на основной функции инструмента? Что если такие инструменты смогут работать в произвольном WebView, будь оно встроено в браузер, редактор или другое приложение на любом устройстве? Доклад про удалённые инструменты: какие есть сложности и как их обойти, как перестать бояться и начать делать инструменты под свои задачи и технологический стек.
Denis Bosak (Magecom): Front-end in Magento, and more. Prospects, technologies, and tools.
Денис Босак (Magecom): Front-end в Magento и не только. Перспективы, технологии, инструменты.
Лучшие практики Continuous Delivery с Docker / Дмитрий Столяров (Флант)Ontico
Потребность в отстроенном процессе Continuous Delivery встает перед каждым развивающимся highload-проектом. Чем больше серверов и составных приложений, чем выше динамика релизов, тем раньше проект сталкивается с данной потребностью, и тем острее она стоит.
Многие команды эксплуатации смогли отстроить этот процесс, некоторые добились впечатляющих результатов, а некоторые — потерпели неудачу. Но все из них знают, что их процесс можно улучшить: сделать быстрее, надежнее, предсказуемее и удобнее.
В этом докладе я хочу обобщить и систематизировать лучшие практики построения процесса Continuous Delivery с использованием актуальных Open Source технологий (Docker, Chef, Gitlab, Kubernetes), а также обозначить известные проблемы и потенциальные пути их решения.
Будет предпринята попытка однозначно ответить на следующие практические вопросы:
- Почему пора всем переходить на Docker? Как лучше собирать Docker-образы? Как лучше доставлять и хранить Docker-образы?
- Как правильно построить процесс разработки Infrastructure as Code (IaC)?
- Как оптимально интегрировать автоматическое и ручное тестирование в процесс Continuous Delivery?
- Как перестать бояться регулярных выкатов новых версий и сделать этот процесс надежным?
- Почему Continuous Delivery не заканчивается релизом новой версии и зачем нужен Kubernetes?
22. Marionette => Marionette + Bower
Нужно следить за версиями
jQuery-*, backbone-* и bootstrap.
Bower – пакетный менеджер, который
закачает нужные библиотеки в корень
проекта и согласует их по версиям.
Bower – это область
внебраузерного JavaScript:
понадобится установка nodejs и npm.
23. Marionette + Bower + RequireJS
Нужно менеджить загрузку
библиотек в браузер.
VanillaJS не поддерживает модульность
исполняемого кода,
поэтому был создан RequireJS.
RequireJS – это js-утилита, которая
загружает фрагменты исполняемого
кода по требованию.
24. Marionette + Bower + RequireJS
Фрагменты исполняемого кода
изолируются через замыкания,
загружаются в рантайме,
асинхронно и по требованию.
Такие фрагменты должны
соответствовать AMD
(Asynchronous Module Definition).
Почти всё, что есть на bower.io,
можно подгружать как AMD.
25. Marionette + Bower + RequireJS + r.js
Ещё есть r.js.
Утилита, которая по RequireJS конфигу
собирает все фрагменты и модули
в один минифицированный
исполняемый файл.
Теперь весь код можно отправить
на девайс в один запрос.
28. JS Backend: node/io + npm + CommonJS
Серверный JavaScript
Исполняемый код
подключается синхронно
и выполняется на бекенде.
Как в java/python/ruby/php.
29. JS Backend: node/io + npm + CommonJS
Модули npm поставляются
в формате CommonJS,
предназначены для выполнения в NodeJs
30. JS Backend: node/io + npm + CommonJS
Модули npm поставляются
в формате CommonJS,
предназначены для выполнения в NodeJs
и несовместимы с AMD.
31. JS Backend: node/io + npm + CommonJS
Ребята захотели npm модули в браузере
и написали Browserify.
32. Marionette + npm + Browserify
В реализации отказываются от асинхронной
загрузки исполняемого кода.
Исходник выглядит чище и приятней.
Такой код нельзя запустить в браузере "как есть",
поэтому Browserify парсит исходники и
собирает их в пригодный для браузера файл.
Подход популярен, а в npm сегодня можно найти
почти всё то, что есть в bower.
Ведущие разработчики поставляют свой софт как
в виде AMD, так и в виде CommonJS модулей.
33. Marionette + npm + Browserify
Побочная плюшка – теперь ваш код сможет
отрендерить DOM как на бекенде внутри NodeJS,
так и в браузере.
Это назвали "Изоморфный Web" и слепили под
это специально заточенный фреймворк – Meteor.
34. Marionette + npm + Browserify + Grunt
Grunt – это таск ранер.
Утилита, которая автоматизирует
рутинные операции.
Например: следить за изменениями в исходниках,
автоматически собирать новый бандл
и перезагрузить страничку браузера.
Вместо Grunt сегодня отказываются в пользу
проворного Gulp.
А ещё есть Broccoli.
35. Marionette + bower + npm + Browserify + Gulp
Некоторые не около-js-ные вещи,
например css библиотеки, реже попадают
в традиционно “серверный” npm.
Поэтому часто пакеты тащат
одновременно и из bower и из npm.
Склеивают это всё через
написание правил Gulp.
36. Boilerplate: Marionette + bower + npm + Browserify + Gulp
У каждого уважающего себя
фронденд-разработчика свой коронный
набор утилит и способов их склейки.
Такой “коронный набор”
любят публиковать у себя на гитхабе
с приставкой "boilerplate".
37. Boilerplate: Marionette + bower + npm + Browserify + Gulp
Часто boilerplate заточены
под конкретные версии софта, поэтому они
стремительно плодятся
и стремительно устаревают.
Сотни их
38. Yeoman: Marionette + bower + npm + Browserify + Gulp
Апофеоз – заплить свой генератор для
http://yeoman.io/
Это специальный пакетный менеджер для
скафолдинга приложений.
39. Marionette + bower + npm + Gulp +
КоронныйНабор + AMD + CommonJS
+ Webpack!!11
Webpack написали чтобы упаковать любой
фронтенд зоопарк.
Позволяет упаковать в один бандл как AMD,
так и CommonJS, код с GitHub, стили, шаблоны,
графику и вашу собаку.
Написаны плагины для подгрузки и упаковки
CSS, LESS, SASS, Stylus, CoffeeScript, JSX, JSON
и всего на свете.
42. ES6 Harmony & ES6 Modules
ES6 был принят этим летом.
Но кому он нужен?
Все уже давно пишут на ES7.
В ES7 ещё больше плюшек.
Ожидается, что ES7 будет принят
в следующем 2016м году.
44. ES6/ES7
Но один компилятор – это мало.
Поэтому запилили сразу два:
Traceur и Babel.
Поддерживаемые фичи публикуют на
http://kangax.github.io/compat-table/es7/
46. ES6/ES7 + SystemJS
SystemJS – универсальный загрузчик модулей
AMD/CommonJS/ES6 с синтаксисом ES6+.
Ваши ES6/7 исходники
загрузятся в браузер как есть
и скомпиллируются у пользователя на лету.
import $ from 'jquery'; // загрузит вам jQuery
import MainAppES6 from 'apps/mainAppES6'; // загрузит
ваш ES6+ файл и скомпиллирует его на лету
Потом можно собрать всё в один
предкомпиленный и минифицированный бандл.
47. ES6/ES7 + SystemJS + jspm
Jspm – это менеджер пакетов,
специально разработанный для
SystemJS
jspm умеет тащить зависимости
c github, npm и bower.
Весь зоопарк теперь аккуратно лежит в
jspm_packages.