Post on 27-Aug-2014
description
transcript
davidson fellipefront-end engineer at globo.com
PRACTICAL GUIDE FOR FRONT-END
DEVELOPMENT FOR DJANGO DEVS
- HTML ~ 2001
- front-end engineer
- globo.com ~ 2010
- more about me at fellipe.com
me
globo.com
- +35 multidisciplinary teams oriented agile methodologies
- large open source community
- projects at opensource.globo.com
globo.com
- 3 multidisciplinary teams
- all engineers develop client side
sports at globo.com
https://www.!ickr.com/photos/frontendbr/1691161875/sizes/o/
WHYFRONT-END?
94%of load time is related to
client side(globoesporte.com/copa)
http://gtmetrix.com/har.html?inputUrl=http://gtmetrix.com/reports/globoesporte.globo.com/7eqNM2Z1/net.harp&expand=true&validate=false
USER EXPERIENCEOPTIMIZED
http://www.reddit.com/r/javascript/comments/14zwpv/why_are_front_end_developers_so_high_in_demand_at/
WHY ARE FRONT END DEVELOPERS SO HIGH IN DEMAND AT STARTUPS IF
FRONT END DEVELOPMENT IS RELATIVELY EASIER THAN OTHER
FIELDS OF ENGINEERING?
CODE NEEDS TO WORK IN DIFFERENT
ENVIRONMENTS
MULTIPLE BROWSERSMULTIPLE VERSIONSMULTIPLE RESOLUTIONSMULTIPLE DEVICES
HTML, CSS, JAVASCRIPT, FEATURE DETECTION, REPAINT, REFLOW, PRE-PROCESSORS, HTTP, CSRF, ANIMATIONS TIME FUNCTIONS, SVG,
CANVAS, LOCALSTORAGE, WEBCOMPONENTS, XSS, WEBSOCKETS, SHADOW DOM,
GRIDS SYSTEMS, SCHEMA.ORG, SEO...
AND WHY NOT?
DEPENDENCY MANAGEMENT, MVC FRAMEWORKS, TESTING, CODE QUALITY
ANALYZERS, TASK RUNNERS, PERFORMANCE...
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
IT’S MUCH MORETHAN CONVERT
JPG TO HTML
http:globoesporte.com
- how load the flags?
- how to create this tabs?
- what happens when a team is loaded?
- how to get a team?
- when use wai-aria?
+combining elements
MAKEAPPS!
app example
- division of responsibilities
- unit tests for each app
- management and setup of dependencies via pypi
- trouble separating after together in production
appproduct core
appnews
apppolls
requirements.txt
our requirements- DRY
- components
- fonts and icons
- similar interactions across site
- possibility of themes
- low speci"city of CSS
thinking in components
<header class="geui-title">
<h1 class="geui-title-label">
Normal <span class="geui-title-bold">Bold</span>
</h1>
<a href="#" class="geui-title-more geui-color-default">read more</a>
<span class="geui-title-bar geui-color-default"></span>
</header> HTML
organizing your app(ge)davidson ➜ .../ge_ui/static (master) $ tree |-fonts |---icons |---opensans |-img |---ge_ui |-----placeholder |-----sprites |-js |---ge_ui |---vendor
|-scss |---ge_ui |---vendor TERMINAL
how blocks works?
{% extends "core/delivery.html" %}
{% block css_delivery %}
{{ block.super }}
<link type="text/css" rel="stylesheet" media="screen" href="poll/css/delivery.css">
{% endblock %}
delivery.html
TEMPLATEapp core
TEMPLATEapp poll
DO MORETEMPLATE TAGS
template tag# -*- coding: utf-8 -*-from django.template import Library
register = Library()
@register.inclusion_tag('components/dropdown.html')def ge_ui_dropdown(dropdown):
return {'dropdown': dropdown}
ge_ui_dropdown.is_safe = Trueregister.filter(ge_ui_dropdown)
dropdown.html<div class="geui-dropdown"> <span class="geui-dropdown-title">{{dropdown.title}}</span> <ul class="geui-dropdown-list"> {% for item in dropdown.itens %} <li class="geui-dropdown-list-item"> <a href="{{item.link}}" class="geui-dropdown-list-link" title="{{item.label}}" {% for meta in item.meta %} data-{{meta.label}}="{{meta.valor}}" {% endfor %}>{{item.label}}</a> </li> {% endfor %} </ul></div>
iterations
DO YOU WANT TO CREATE A UI LIB?
NO, I DON’T!
CSSVS
PREPROCESSORS
good parts
- improve productivity
- easy to work with modules
- use of mixins, variables, selector inheritance and nesting
BAD PRACTICES WITH CSS, CAN BE MADE ������
WORSE WITH PREPROCESSORS
doing evil with scss!
.great-grandfather {
.grandfather {
.father {
#wtf {
color: #f60;
}
}
}
}
.great-grandfather
.grandfather
.father#wtf {
color: #f60;
}
/*
why high specificity id? */
SCSS CSS
AUTOMATING TASKS
let’s use Grunt?
grunt.js
- low learning curve
- large number of plugins
- huge open source community
I’ve to con"gure node.js?
$ make grunt-con"g
grunt-config:
@if [ ! $$(which node) ]; then echo "✖ installing node..."; brew install node; else echo "node ✔"; fi
@if [ ! $$(which npm) ]; then echo '✖ installing npm...'; sudo curl https://npmjs.org/install.sh -k | sh; else echo "npm ✔"; fi
@if [ ! $$(which grunt) ]; then echo '✖ installing grunt...'; sudo npm install -g grunt-cli; else echo "grunt ✔"; fi
@sudo npm i --save-dev
MAKEFILE
grunt-config:
@if [ ! $$(which node) ]; then echo "✖ installing node..."; brew install node; else echo "node ✔"; fi
@if [ ! $$(which npm) ]; then echo '✖ installing npm...'; sudo curl https://npmjs.org/install.sh -k | sh; else echo "npm ✔"; fi
@if [ ! $$(which grunt) ]; then echo '✖ installing grunt...'; sudo npm install -g grunt-cli; else echo "grunt ✔"; fi
@sudo npm i --save-dev
MAKE
tasks
- test runners
- preprocessors
- js / css lint
- create sprites
- concatenation
package.json
{
"name": "poll",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.5",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-watch": "~0.5.3",
"load-grunt-tasks": "~0.2.0",
"grunt-contrib-compass": "~0.6.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-shell": "~0.6.1"
}
} JS
Grunt"le.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file .readJSON('package.json'), pathBase: 'poll/static/poll/',
pathSrc: '<%= pathBase %>src/',
pathBuild: '<%= pathBase %>build/',
compass: {},
uglify: {},
clean: {},
concat: {},
copy: {},
shell: {}
});
require('load-grunt-tasks')(grunt);
grunt.registerTask('build', ['compass:min','concat','clean','copy','uglify','shell']);
}; JS
LET'S CREATE ACODING STANDARD?
standards- quotes, braces, semicolons
- Space vs Tab
- Single quote vs double quotes
- nomenclatures for functions, Object Literal, conditional statement...
https://github.com/rwaldron/idiomatic.js/
https://github.com/airbnb/javascript
PERFORMANCE
#everybodyloves
http://www.broofa.com/Tools/JSLitmus/
https://github.com/django-compressor/django-compressor
https://github.com/davidsonfellipe/keepfast/
http://browserdiet.com/
What impact performance?- low conversions
- low engagement
- high rejection rates
- fellipe.com/talks
- github.com/davidsonfellipe
- twitter.com/davidsonfellipe
thankyou