frontendtools

Efficient frontend tools

Transcript

1. ИНСТРУМЕНТЫ ЭФФЕКТИВНОЙ ФРОНТЕНД-РАЗРАБОТКИ Денис Колесников @DenisKolesnikov DenKolesnikov Атвинта
2. HTML2
3. <!DOCTYPE HTML PUBLIC "-//W3 Organization//DTD W3 HTML 2.0//EN"> <HTML> <HEAD> <TITLE> A sample HTML document </TITLE> </HEAD> <BODY> <H1> An Example of Structure <br> In HTML </H1> <P> Here's a typical paragraph. <UL> <LI> Item one has an <A NAME="anchor"> anchor </A> <LI> Here's item two. </UL> </BODY> </HTML>
8. IDE
9. РАСШИРЯЙТЕ ВОЗМОЖНОСТИ IDE
11. user@localhost ~ $ learn to use cli user@localhost ~ $ git user@localhost ~ $ npm user@localhost ~ $ grunt user@localhost ~ $ bower
12. DEV TOOLS
13. DEV TOOLS
14. DEV TOOLS
15. DEV TOOLS
16. DEV TOOLS
17. ДА-ДА, ТЕМНАЯ ТЕМА ;)
18. ИНСТРУМЕНТЫ СБОРКИ
23. – Билл Гейтс «Чтобы облегчить тяжёлую работу, поручи её ленивому, и он найдёт способ её упростить и облегчить».
24. SASS $col: 40px; @mixin button-link($color) { display: block; height: 20px; line-height: 20px; padding: 0 20px 0 20px; background: $color; } ul { list-style: none; &.nav { width: $col * 12; li { float: left; a { @include button-link(#ccc); } } } }
25. COMPILED CSS ul { list-style: none; } ul.nav { width: 480px; } ul.nav li { float: left; } ul.nav li a { display: block; height: 20px; line-height: 20px; padding: 0 20px 0 20px; background: #ccc; }
26. ПРЕПРОЦЕССОРЫ
27. JAVASCRIPT
28. MINIFICATION
29. MINIFICATION 'use strict'; $(document).ready(function() { var validator = { error: '', forms: $('form'), validate: function() { var self = this; this.forms.each(function() { self.error = $(this).find('input').val() || 'Error!'; }); return self.error; } }; $('p.debug').text(validator.validate()); });
30. MINIFICATION $(document).ready(function(){var b={error:"",forms:$ ("form"),a:function(){var a=this;this.forms.b(function() {a.error=$(this).find("input").c()||"Error!"});return a.error}};$("p.debug").text(b.a())});
31. ЗАЧЕМ НАМ ЭТО?
32. СБОРКА ЭТО: • Производительность • Скорость загрузки • Снижение нагрузки на сервер
33. Запросы к серверу
34. Рендеринг
35. Запросы к серверу
36. Рендеринг
37. Вручную?
38. Grunt.js Gulp.js
39. module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('test', ['concat']); grunt.registerTask('default', ['concat']); }; var gulp = require('gulp'); // include plug-ins var jshint = require('gulp-jshint'); // JS hint task gulp.task('jshint', function() { gulp.src('./src/scripts/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); });
40. src task tmp task dst src task dst task
41. DEMO
42. СОБИРАТЬ КОД ХОРОШО Но только когда это правильно написаный код
43. LINTER
44. LINTER (function() { var a = 'some string'; var b = 123; var c = true; })(); (function() { var a = 'some string', b = 123 c = true; })(); ,
45. LINTER var func = function() { return { someProp: 'someString', someMethod: function() { console.log(this.someProp); } } }
46. CODE STYLE • JSCS - JavaScript Code Style • Дисциплинирует • Стандартизирует • Способствует командной работе
47. CSS (SCSS) CODESTYLE ul { list-style: none; &.nav { width: 20px; li { float: left; font-family: Arial, sans-serif; margin-right: 20px; margin-left: 20px; a { @include inline-block; text-decoration: none; display: block; padding-left: 20px; padding-right: 20px; } } } }
48. CSS (SCSS) CODESTYLE ul { list-style: none; &.nav { width: 20px; li { font-family: Arial, sans-serif; float: left; margin-right: 20px; margin-left: 20px; a { display: block; padding-right: 20px; padding-left: 20px; text-decoration: none; @include inline-block; } } } }
49. CSSComb
50. А ЭТО КАК АВТОМАТИЗИРОВАТЬ?
51. 3RD PARTY VENDORS
54. ХРАНЕНИЕ БИБЛИОТЕК • Content Delivery Network • Качаем прямо в папку с проектом • Качаем в специальную папку с библиотеками • GitHub
55. BOWER.JS
56. BOWER.JSON { "name" : "sampleproject", "version" : "0.0.1", "dependencies" : { "jquery" : null, "requirejs" : null } }
57. AMD Asynchronous Module Definition
59. МОДУЛЬ define('app', ['jquery'], function($) { $(function() { $('body').append('<p>Hello world</p>'); }); });
60. ПОДКЛЮЧЕНИЕ require(['app']);
61. Загрузка модулей main app jQuery Slider
62. РАЗДЕЛЯЙ И ВЛАСТВУЙ • Модульный подход • Структурированный код • Не используется глобальное пространство имен • Быстрый рендер страниц • Нет «лишнего» кода
63. ГРАФИКА Как ее автоматизировать?
64. SVG • Мало весит • Масштабируется • Легко эмбедится в base64 • Можно организовать фоллбек на png
65. CSS SPRITES
66. CSS SPRITES • Уменьшение количества запросов к серверу • Увеличивается скорость • Нет паразитной подгрузки
67. CSS SPRITES • Бывают объемны • Невозможность использования паттернов • Трудности с масштабированием
69. SCAFFOLDING
73. КАК ЭТО ВСЕ ВНЕДРИТЬ?
76. СПАСИБО! http://speakerdesk.com/#/