Download to read offline
![style style.hello style['hel'+'lo'] Подключение стилей var = require('style.css'); var Example = React.createClass({ render: function () { return ( <div className={ }>Hello!</div> <div className={ }>Hello!</div> ); } }); 01. 02. 03. 04. 05. 06. 07. 08. 09. 35](https://image.slidesharecdn.com/stachka-2016-160423212145/75/CSS-JS-HTML-JS-JS-JavaScript-35-2048.jpg)
![module2-baz module2-baz module2-qux Настройки CSSO Фильтрация селекторов: { "tags": ["ul", "li", ...], "classes": [" ", ...] } Скоупы: "scopes": [ [" ", " "] ] 01. 02. 03. 04. 01. 02. 03. 42](https://image.slidesharecdn.com/stachka-2016-160423212145/75/CSS-JS-HTML-JS-JS-JavaScript-42-2048.jpg)
Uploaded byAlexey Ivanov
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
Документ обсуждает важность оптимизации кода JavaScript, CSS и HTML для упрощения разработки и улучшения производительности веб-приложений. Рассматриваются методы сокращения классов CSS, удаления ненужного кода и интеграции с инструментами вроде Webpack и Babel. Основное внимание уделяется важности автоматизации процессов сборки и поддержанию чистоты кода в проектах.
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
- 1. CSS-в-JS, HTML-в-JS, ВСЁ-в-JS Все гораздопроще, когда всё вокруг JavaScript Алексей Иванов, Злые Марсиане
- 2.
- 3.
- 4.
- 5. Часть 1. Задачи ипроблемы 5
- 6.
- 7. Сократить CSS-классы Замена вCSS 1. Собрать все CSS в один файл. 2. Заменить имена классов. 3. Сохранить спиcок замен: { 'block__element_modificator': 'aBc' }01. 7
- 8. block__element block__element_modificator Сократить CSS-классы Заменав HTML Заменить все вхождения: <div class=" "> Включая составные имена: "block__element" +"_modificator" 01. 01. 8
- 9. block__element_modificator block Сократить CSS-классы Замена вJavaScript Найти и заменить имена всех классов: var className = " "; $elem.addClass(className); Не заменить ничего лишнего: var = ...; 01. 02. 01. 9
- 10. Убираем лишний CSS Легаси, Bootstrap,Font Awesome 10
- 11. Убираем лишний CSS Чтонужно сделать? 1. Основная задача: Удалить лишние правила для одиночных классов, id и тегов. 2. Задача со звездочкой: Удалить несуществующие комбинации: .class1 .class2 {} . 11
- 12. Убираем лишний CSS ПарсимHTML 1. Понять структуру HTML для каждой страницы с учетом состояний (авторизован, неавторизован, акции, попапы). 2. Получить список классов, id и тегов. Лучше в виде дерева. 12
- 13. Убираем лишний CSS ПарсимJavaScript 1. Понимаем по JS как он может менять наш HTML: Добавление классов, добавление элементов, и т. д. 2. Дополняем наше дерево возможными состояниями. 13
- 14.
- 15. Убираем лишний JavaScript 1.Удалить то, что не касается DOM: переменные, функции, и т. д. 2. Удалить то, что касается DOM: 1. Найти какие функции и методы влияют на DOM. 2. Найти может ли этот DOM быть на странице. 3. Удалить ненужное. 15
- 16. Отдельная сборка для лендинга Илине лендинга 16
- 17. Отдельная сборка для лендинга 1. Научитьнаши инструменты понимать что такое страница. 2. Построить HTML-дерево страницы во всех состояниях. 3. Найти какой JavaScript может её изменять. 4. Найти CSS и JavaScript который нужен для этой страницы. 17
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. Часть 2. Как всеможет быть 23
- 24.
- 25. module.exports require('./file1'); Пример Browserify file1.js: var MyModule= {}; MyModule.method = function () {...}; = MyModule; file2.js: var something = something.method(); 01. 02. 03. 01. 02. 25
- 26.
- 27.
- 28. longName var a =10; b Пример удаления кода До UglifyJS: function ( ) { return longName; } После UglifyJS: function ( ) { return b; } 01. 02. 03. 04. 01. 28
- 29.
- 30. <div onClick={this.onClick}>Hello!</div>; React и.jxs var Example = React.createClass({ onClick: function () { alert('Hello world!'); }, render: function () { return } }); 01. 02. 03. 04. 05. 06. 30
- 31. React.createElement( 'div', { onClick: onClick}, "Hello!" ) React и скомпилированный .jxs var Example = React.createClass({ onClick: function () { alert('Hello world!') }, render: function () {return ( );} }); 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 31
- 32.
- 33. style.css data.json kitten.png Webpack и require Подгрузитв шапку, добавит в граф пути из url() и @import : var style = require(' '); Подгрузит как JavaScript объект: var json = require(' '); Положит в папку для готовых ассетов, отдаст путь: var img = require(' '); 01. 01. 01. 33
- 34. CSS-в-JS JSS и CSSModules 34
- 35. style style.hello style['hel'+'lo'] Подключение стилей var =require('style.css'); var Example = React.createClass({ render: function () { return ( <div className={ }>Hello!</div> <div className={ }>Hello!</div> ); } }); 01. 02. 03. 04. 05. 06. 07. 08. 09. 35
- 36. hello .hello--jss-0-0 Пример JSS Стили: export { fontSize:12 } Скомпилированные стили: { font-size: 12px; } 01. 02. 03. 01. 36
- 37. hello style_hello_b8bW2Vg3fwHozO ozO Пример CSS Modules Стили: .{ font-size: 12px; } Скомпилированные стили в разработке: . { font-size: 12px; } Полная сборка: . { font-size: 12px; } 01. 01. 01. 37
- 38. Tree shaking Rollup иWebpack 2 38
- 39. Tree shaking require file1.js module.exports ={ header: "header", footer: "footer" } file2.js var styles = require('./file1'); 01. 02. 03. 04. 01. 39
- 40. header content fooner header footer Tree shaking importи export в ES6 file1.js export const = "header"; export const = "content"; export const = "footer"; file2.js import { , } from file1; 01. 02. 03. 01. 40
- 41.
- 42. module2-baz module2-baz module2-qux Настройки CSSO Фильтрацияселекторов: { "tags": ["ul", "li", ...], "classes": [" ", ...] } Скоупы: "scopes": [ [" ", " "] ] 01. 02. 03. 04. 01. 02. 03. 42
- 43. Чтение и правка JavaScript Babel.js нетолько для es6 43
- 44. Часть 3. К чемувсе это? 44
- 45. К чему всеэто? 1. Нет отдельных html, css, js – все тесно взаимосвязано и влияет друг на друга. 2. В процессе сборки все в JS – мы можем использовать кучу автоматических оптимизаций. 3. Граф зависимостей – позволяет собирать только нужное и ничего не терять. 4. Локальное пространство имен – нет глобальных переменных и классов, все делает автоматика, можно не думать о конфликтах. 45
- 46. Ближайшие точки для развития 1.Интеграция с IDE. 2. Рендеринг на сервере: 1. Шаблоны отделены от стилей и логики. 2. JS-шаблонизаторы и инструменты сборки сейчас сильно заточены под SPA. 3. Огромная куча других инструментов для оптимизации и анализа. 46
- 47. Вопросы? Я всегда радпоговорить с кем-ниубудь про этих штуки. • Подходите обсуждать на afterparty. • Пишите в: • Twitter: @iadramelk • Facebook: @iadramelk 47