Привет, Хабр! В ближайшую пятницу, 24 июня, мы проведем первый в Калининграде оффлайн-митап МойОфис для разработчиков. Приглашаем хабрасообщество поучаствовать в этом событии!

На митапе эксперты из команды разработки МойОфис выступят с докладами о JavaScript и не только. В профессиональном кругу обсудим библиотеки Polymer и React, систему Nx, а также плюсы и минусы FullStack фреймворков на примере Meteor.JS. Материалы будут интересны как frontend-, так и backend-разработчикам. И это лишь первая половина вечера — далее гости мероприятия узнают о методах оптимизации рабочих процессов в IT и получат наши эксклюзивные инсайты о work-life balance. В том числе о воплощении подхода, который позволяет не просто много зарабатывать, но и иметь достаточно свободного времени для семьи, друзей и увлечений. После митапа мы продолжим общение: все желающие специалисты смогут присоединиться к нашей беседе в неформальной обстановке гастро-паба.

IT-митап МойОфис #1 стартует в Калининграде 24 июня, в 18:30, в Центре коммуникации "Резаниум". Мероприятие бесплатное, регистрация доступна по ссылке. Полную программу митапа читайте под катом.

Github

Замечание для тех, кто еще не использовал EAP'ы: EAP — это early access preview, полностью бесплатная, полнофункциональная, со сроком жизни 30 дней. Потом ее надо заменить на следующий EAP, купить релиз или смириться с ее превращением в тыкву (это — законные способы эксплуатации, нелегальные мы тут перечислять не будем). EAP — это еще «нестабильная» версия, и это означает, что некоторые функции в ней могут работать неидеально, хотя в целом она достаточно близка к релизу по функциональности и качеству.

• обновленный Live Edit: теперь при любом изменении в коде приложения под Node.js позволяет автоматически обновлять приложение;
• поддержка фреймворка Meteor;
• поддержка системы сборки Gulp;
• трассировщик Spy-js для Node.js;
• интеграция с PhoneGap/Cordova;
• шаблоны (Postfix templates) для JavaScript;
• улучшенная поддержка библиотеки Polymer;
• усовершенствованный плагин Editorconfig.

• Polymer: Creating responsive UIs
• Polymer: making Web Components accessible
• Componentize the Web
• Polymer: Interacting with Google Services using nothing but HTML

Зачем нам еще один DOM?

Инкапсуляция является основой веб-компонентов.

Кто я

О чем статья, коротко

Вступление

• CSS не пересекался.
• Области видимости JS не пересекались.
• HTML был понятным и читаемым, никаких лишних элементов.

Вкратце об изменениях

• Если вы используете Web Push, то у вас есть возможность закрепить оповещение на экране. И пользователь может либо закрыть оповещение, либо нажать на него. То есть если он занят, то он скорее всего закроет, даже если бы он хотел прочесть материал
• Если вы используете дополнение для Chrome, тогда Rich Notification исчезает через несколько секунд в небытие.

Вкратце обо всём

CleverStyle Framework всячески помогает разработчику не только на сервере, но и на фронтенде. Я об этом несколько раз упоминал в прошлых статьях, но никогда не вдавался в подробности того, как именно всё устроено под капотом.

Данная статья будет погружением в подробности работы со статикой для фронтенда, начиная от того как определяются файлы нужные на странице и заканчивая оптимизациями доставки статики вроде HTTP/2 Server Push. Не забудем и о том, почему с использованием CleverStyle Framework можно обойтись без кастомной системы сборки и как при желании интегрировать такую систему сборки в процессы фреймворка.

Данная статья специально упускает из внимания интеграцию Bower/NPM и RequireJS, это будет тема отдельной статьи в недалеком будущем.

Часть 1. Сервер
Часть 2. Клиент
Часть 3. Мутации
Часть 4. Валидация. Выводы

Для реализации UI рассмотрим пример написания веб-клиента для нашего GraphQL-сервера. И коли уж мы решили не следовать старым добрым традициям, то и в UI этого делать, конечно же, не будем и напишем его на кастомных веб-компонентах с использованием замечательной библиотеки Polymer.

Почему для подключения к GraphQL-серверу была выбрана библиотека Apollo сказать сложно, так как аналогов для работы с GraphQL я не встречал. Изначально библиотека, как и вся ее документация заточена под React, а вся информация об интеграции с Polymer ограничивается лишь ссылкой на компонент в разделе Integrations. Таким образом, если вы работаете с React, вам и карты в руки. Все примеры, твики и хуки именно для него.