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

http://csslint.net/

PERFORMANCE

#everybodyloves

http://www.broofa.com/Tools/JSLitmus/

http://pitomba.org/

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