WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке

•

2 gostaram•439 visualizações

WebCamp2016, 29 июля, Одесса Юрий Артюх Chief Technology Officer, Coderiver Современные подходы в верстке В 2016 верстка трансформируется, о том как ее автоматизировать, и выжить верстальщику среди реактов, ангуларов и прочего и будет рассказ. Website: http://webcamp.in.ua/devops.html#theme Facebook: https://www.facebook.com/WebCamp/ VK: https://vk.com/webcamp Twitter: https://twitter.com/WebCampOdessa Youtube: http://bit.ly/2bsQ0LO

Tecnologia

Чем я занимаюсь
• 12 лет верстаю
• 18 человек в команде
• Больше 2 тысяч сайтов
• Сплю
• Лентяй

Чем я не занимаюсь
• Соблюдаю дедлайны
• Перфекционист
• Пишу много javascript

Avocode
Sketch
Photoshop
Mac OS
Windows
Linux

Footer к низу
body: ﬂex-direction: column

Еще
• CSS Grid Layout http://gridbyexample.com/
examples/
• Flex, http://www.ﬂexboxdefense.com/, ﬂex-basis
• nth-child - quantity селектор, http://alistapart.com/
article/quantity-queries-for-css

У каждого своя задача
SASS PostCSSCSS CSS→ → →

Nunjucks + front-matter
layout.htmlmy-page.html

Lint-staged
• Валидирует файлы в перед
коммитом
• Только файлы в коммите
• Отличная защита от
начинающих верстальщиков

Yeoman
для тех у кого много проектов
https://www.npmjs.com/package/generator-man

http://nicothin.github.io/idiomatic-pre-CSS/

webcomponents
another way to build it all

Дякую!
Юрий Артюх
cssing.org.ua
twitter.com/akella
facebook.com/akella
skype: akella_

WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке

Mais conteúdo relacionado

Mais procurados

1. Общая информация - Что именно нужно бэкапить? - Типы бэкапов. Плюсы и минусы. - Периодичность создания. - Выбор хранилища. 2. Бэкапы БД и файлов - Обзор инструментов. - Источники данных для бэкапов. - Неочевидные особенности создания/восстановления. 3. Проблемы организации резервного копирования - Актуальность данных. - Скорость восстановления. - Надежность создания резервных копий. 4. Верификация бэкапов - Тестовый стенд. - Мониторинг процесса. - Ручные проверки.

Организация надежного резервного копирования веб-проекта. Практика и подводны...

Anton Baranov

Alex baumgertner bem_in_small_projects

Alexander Baumgertner

Самые частые проблемы и пути решения при росте нагрузки и масштабировании про...

Колёса Крыша Маркет

WepPerfomance,

Dmitriy Polisadov

Highload, высокие нагрузки — популярный и дорогой buzzword, ради него проводятся огромные конференции, разработчики указывают его в резюме, претендуя на большие деньги, а работодатели в вакансиях, обещая более интересную работу. В докладе я показываю, что современная производительность серверов позволяет не думать о нагрузке для 95% "highload" проектов, знания из конференций не нужны в реальной жизни. Для разработки почти любого, даже очень крупного сайта достаточно PHP+MySQL, здравого смысла и совсем-совсем базовых правил, не обсуждающихся даже на Highload Junior. План выступления. 1. Ликбез о производительности. RPS, latency — что это значит, как считается, к каким числам надо стремиться? Из чего складывается время отклика? База данных, фронтенд, верстка или мобильное приложение. 2. Замеры достижимой производительности теплого LAMP-ового сервера. Бенчмарк без индексов в базе. Бенчмарк с индексами в базе. Сравнение с требуемыми цифрами. 3. Перечисление возможных детских ошибок, которые могут испортить эти результаты в жизни. Все эти ошибки объясняются не в академии Highload или институте Highload Junior, а в школе. Примеры ошибок: - выгрузка всей базы, а не нужных 20 элементов; - паразитный вызов тяжелой страницы; - плохой хостинг; - чужие тормозные элементы; - неадекватный объём html/js-кода. 4. Отсутствие детских ошибок позволяет эффективно программировать 90% крупных сайтов, 3-4 приема превратят 90% в 95%. - nginx; - репликация; - кэширование и предрасчет. Этому, кстати, тоже почти не учат на highload junior, но этому я вас уже научил. 5. Примеры продуктов, в которых на самом деле нужен highload? - Очень-очень-очень много хитов, дешевле highload, чем новое железо. - Очень много очен�

Миф об очень сложном Highload / Александр Горный (Mail.Ru Group)

Ontico

Мы используем БЭМ для организации фронтенда с самого начала разработки проекта Repka.com. В докладе я расскажу об архитектуре нашего сайта и применяемых на нем технологиях Яндекса, о том, как мы пришли к i-bem, что используем в качестве шаблонизатора, как устроен наш client-side и каковы планы развития на ближайшее будущее. А также разберу плюсы БЭМ с точки зрения бэкенд-разработчика.

Дмитрий Кушников — БЭМ глазами бэкенд-разработчика

Yandex

Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.

DataArt

История развития проекта с точки зрения клиентских технологий - от веб-сайта к появлению мобильных клиентов и смещению фокуса к mobile-first разработке. Общие черты нашей архитектуры и их отличия от стандартных решений. Единый протокол общения с приложениями iOS/Android/WindowsMobile/MobileWeb/Web и особенности реализации для JavaScript платформ (десктопные и мобильные браузеры). Изменение процесса разработки и подходов к реализации нового функционала для переключения на mobile-first стратегию.

Эволюция клиентской разработки: от веба ко "всеобщей мобилизации” или mobile-...

Pavel Dovbush

Презентация: 1С-Bitrix — как начать

Dmitriy Polisadov

Рассказ от tech-менеджера о том, как мы в Acronis выбирали фреймворк в условиях, когда любое более-менее важное технологическое решение сразу затрагивает с десяток команд, несколько сотен человек и права «случайно все сломать» нет. В докладе пойдет речь о том, что производительность фронтенда — это больше про слаженную работу команды, про понятный и масштабируемый код, чем про сухие циферки. Но циферки тоже будут. 1) Какие у нас были проблемы с текущим фреймворком — UI, архитектура, код. 2) Как измеряли, что примерно стоит брать (исследование популярности). 3) Что рассматривали. 4) На пути к демо-проекту, какие были сложности (то, что уперли идею с Typescript, собственный компилятор шаблонов, четыре Flux-фреймворка и все плохи). 5) Два пилотных демо-проекта: цифры. 6) Оценка трудоемкости перехода.

Javascript-фреймворки:  должен остаться только один

Sergey Xek

Александр Кашеверов — Обзор React.js

DataArt

На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом. HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами. Основные моменты доклада: — Для каких проектов Web Components будут полезны в первую очередь; — Действительно ли Web Components настолько удобны? Примеры “до” и “после”; — Текущие проблемы реализации в браузерах и их решение; — Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться; — Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.

HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...

Ontico

DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков. В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам. В этом докладе: - подходы к решению проблемы медленного DOM; - существующие решения: react-canvas, методология Netflix; - поиск идеального решения для оптимизации производительности; - рендеринг HTML/CSS через WebGL, знакомство с HTML GL; - ограничения и рекомендации.

HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...

Ontico

Drupal and NodeJS.

DrupalForumZP2012

Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)

Ontico

Mobile web apps

Pavlo Iuriichuk

Синяя Борода. История одного проекта.

Andrew Mayorov

РИТ++ 2017, HighLoad Junior Зал Сингапур, 5 июня, 15:00 Тезисы: http://junior.highload.ru/2017/abstracts/2632.html Наиболее типичные ошибки, которые совершаются при создании высоконагруженных продуктов: выбор используемых языков, фреймворков, СУБД и других инструментов. Каковы причины совершения этих ошибок, и как их избежать. Во время проектирования и разработки высоконагруженных программных продуктов существует большой соблазн применить классические подходы. Однако не все они будут полезны, а какие-то даже вредны. При этом цена каждой такой ошибки всегда будет очень большой. На примере нескольких реальных проектов мы поговорим об ошибках проектирования, разработки и управления, о том, почему они возникли, и о решениях, которые позволили (или не позволили) преодолеть их.

Ошибки проектирования высоконагруженных проектов / Максим Ехлаков (OneTwoRent)

Ontico

139 - Spring. Добавление JavaScript

Roman Brovko

Mais procurados (19)

Организация надежного резервного копирования веб-проекта. Практика и подводны...

Alex baumgertner bem_in_small_projects

Самые частые проблемы и пути решения при росте нагрузки и масштабировании про...

WepPerfomance,

Миф об очень сложном Highload / Александр Горный (Mail.Ru Group)

Дмитрий Кушников — БЭМ глазами бэкенд-разработчика

Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.

Эволюция клиентской разработки: от веба ко "всеобщей мобилизации” или mobile-...

Презентация: 1С-Bitrix — как начать

Javascript-фреймворки:  должен остаться только один

Александр Кашеверов — Обзор React.js

HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...

HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...

Drupal and NodeJS.

Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)

Mobile web apps

Синяя Борода. История одного проекта.

Ошибки проектирования высоконагруженных проектов / Максим Ехлаков (OneTwoRent)

139 - Spring. Добавление JavaScript

Destaque

Итак, у Вас есть продукт. Как понять сколько можно и сколько нужно брать за него денег? Как бы не продешевить? Знайте, Вы не один, кто задается таким вопросом и способов решить эту дилемму придумано уже довольно много. Поговорим о некоторых из них, и может быть уже завтра Вы начнете зарабатывать на своем продукте в разы больше!

WebCamp 2016: BizDev. Андрей Моспан: Правда ли, что продукт стоит ровно столь...

WebCamp

В этом докладе мы расскажем свою историю про то, как автоматические сборки и развертывания пришли на смену ручному труду разработчиков и операционных инженеров. Это позволило нам увеличить предсказуемость наших релизов и увеличить доверие к команде.

WebCamp 2016: DevOps. Егор Лопатин и Юрий Железко: How we build and deploy ou...

WebCamp

WebCamp2016, 29 июля, Одесса Андрей Копёнкин CTO, FlyElephant Оптимизируем мобильный веб полностью В докладе поговорим об инициативе Accelerated Mobile Pages, о преимуществах её использования, что она из себя представляет и как она ускоряет отображение веб-страниц для портативных устройств Website: http://webcamp.in.ua/devops.html#theme Facebook: https://www.facebook.com/WebCamp/ VK: https://vk.com/webcamp Twitter: https://twitter.com/WebCampOdessa Youtube: http://bit.ly/2bsQ0LO

WebCamp2016:Front-End_Андрей Копёнкин_Оптимизируем мобильный веб полностью

WebCamp

1. Как подобрать людей, которые будут эффективно работать над продуктом-монстром? 2. Какую систему для их развития построить? Личный опыт: 2.1. Мотивация, повышение зарплаты, личностное развитие. 2.2. LTV сотрудника 2.3. "План Б". 3. Какие критические бреши в такой системе могут возникнуть и как их избежать?

WebCamp 2016: PM. Дмитрий Пискарев: Способы мотивации и продления LTV сотрудн...

WebCamp

WebCamp 2016: PHP.Денис Потапов.Рефакторим код не задумываясь

WebCamp

WebCamp 2016: DevOps. Ярослав Погребняк: Gobetween - новый лоад балансер для ...

WebCamp

WebCamp 2016: BizDev. Кейт Голдберг: Agile business development: как применят...

WebCamp

WebCamp 2016: DevOps. Николай Дойков: Опыт создания клауда для потокового вид...

WebCamp

Это доклад о том, почему стоит рассматривать написание приложений на JavaScript как серьезную альтернативу для некоторых задач. Будет раскрыты особенности современных платформ: Cordova (на примере Ionic Framework), Native Script и React Native, почему стоит обратить на них внимание и в каких проектах они станут отличным выбором для команды разработчиков и клиента.

WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.

WebCamp

WebCamp 2016: PHP.Алексей Петров.PHP at Scale: System Architect Toolbox

WebCamp

— Вы не любите конфликты? — Да вы просто не умеете их готовить! Многие из нас считают, что конфликты это плохо и, что их отсутствие это признак здоровой атмосферы в команде и вселенского счастья. Так вот нет! В докладе мы обсудим типологию конфликтов, их уровни урегулирования, виды власти и реальные кейсы по циклу жизни конфликтов. После этого доклада вы точно полюбите конфликты! :)

WebCamp 2016: PM. Яна Пролис: "Вредные" советы по конфликтам в команде и комп...

WebCamp

WebCamp2016, 29 июля, Одесса Роман Якобчук (Senior Software Engineer, RevJet) Relay, GraphQL и остальные радости современного React После бури различных библиотек, направлений и обновлений в мире React, которая обрушилась на нас в прошлом году, мы почувствовали некоторое затишье. Действительно за последние полгода мы уже успели немного заскучать, это прекрасный момент выдохнуть и разобраться с технологиями которые выпустил Facebook для фетчинга данных в React (GraphQL, Relay), и тем, на что это вдохновило комьюнити. Website: http://webcamp.in.ua/devops.html#theme Facebook: https://www.facebook.com/WebCamp/ VK: https://vk.com/webcamp Twitter: https://twitter.com/WebCampOdessa Youtube: http://bit.ly/2bsQ0LO

WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости соврем...

WebCamp

Доклад посвящен вопросам разработки требований в проектах Business process automation и Research and development. На примере реальных кейсов будут рассмотрены инструменты и практики, позволяющие повысить эффективность процесса разработки требований, и снизить проектные риски

WebCamp 2016: PM. Роман Кравченко: Разработка требований и управление рисками...

WebCamp

WebCamp2016:Front-End.Катерина Поршнева.Эволюция CSS: от темных времен до CSS...

WebCamp

WebCamp 2016: Python_Кирилл Перевозчиков _Рецепты приготовления uWSGI

WebCamp

WebCamp 2016: PHP. Александр Шкарбалюк: SSO: Кому оно нужно и как его готовить?

WebCamp

WebCamp2016:Front-End.Максим Климишин.Теоретические и практические концепции ...

WebCamp

WebCamp 2016: PHP.Сергей Яковлев.Phalcon 3

WebCamp

WebCamp 2016: PHP. Дмитрий Науменко: Рецепты для Yii2.

WebCamp

WebCamp 2016.PHP.Боднарчук Михаил.BDD на практике с Codeception

WebCamp

Destaque (20)