$30 off During Our Annual Pro Sale. View Details »

Practical guide for front-end development for Django Devs

Practical guide for front-end development for Django Devs

Good tips for front-end development for Django Apps

Davidson Fellipe

May 03, 2014
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

Transcript

  1. davidson fellipe
    front-end engineer at globo.com
    PRACTICAL GUIDE
    FOR FRONT-END
    DEVELOPMENT FOR
    DJANGO DEVS

    View Slide

  2. - HTML ~ 2001
    - front-end engineer
    - globo.com ~ 2010
    - more about me at
    fellipe.com
    me

    View Slide

  3. globo.com
    - 35 multidisciplinary teams
    using agile methodologies
    - large open source community
    - projects at opensource.globo.com

    View Slide

  4. globo.com
    - 3 multidisciplinary teams
    - all engineers code for client side
    sports at globo.com

    View Slide

  5. https://www.!ickr.com/photos/frontendbr/1691161875/sizes/o/
    WHY
    FRONT-END?

    View Slide

  6. 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

    View Slide

  7. USER EXPERIENCE
    OPTIMIZED

    View Slide

  8. 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?

    View Slide

  9. CODE NEEDS TO
    WORK IN DIFFERENT
    ENVIRONMENTS

    View Slide

  10. MULTIPLE BROWSERS
    MULTIPLE VERSIONS
    MULTIPLE RESOLUTIONS
    MULTIPLE DEVICES

    View Slide

  11. 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...

    View Slide

  12. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg

    View Slide

  13. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg

    View Slide

  14. IT’S MUCH MORE
    THAN CONVERT
    JPG TO HTML

    View Slide

  15. View Slide

  16. http:globoesporte.com

    View Slide

  17. - how load the shields?
    - how to create this
    tabs?
    - what happens when a
    team is loaded?
    - how to request a new
    soccer team?
    - where to use
    WAI-ARIA?

    View Slide

  18. +
    combining elements

    View Slide

  19. View Slide

  20. MAKE
    APPS!

    View Slide

  21. app example
    - division of
    responsibilities
    - unit tests for each app
    - management and
    setup of dependencies
    using pypi
    - is difficult to separate
    when the apps are
    already in production
    together
    app
    product core
    app
    news
    app
    polls
    requirements.txt

    View Slide

  22. View Slide

  23. our requirements
    - DRY
    - components
    - fonts and icons
    - similar interactions across site
    - possibility of themes
    - low speci"city of CSS

    View Slide

  24. thinking in
    components


    Normal Bold

    read more


    HTML

    View Slide

  25. 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

    View Slide

  26. how blocks work?
    {% extends "core/delivery.html" %}
    {% block css_delivery %}
    {{ block.super }}
    rel="stylesheet"
    media="screen"
    href="poll/css/delivery.css">
    {% endblock %}
    delivery.html
    TEMPLATE
    app core
    TEMPLATE
    app poll

    View Slide

  27. DO MORE
    TEMPLATE TAGS

    View Slide

  28. 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 = True
    register.filter(ge_ui_dropdown)

    View Slide

  29. dropdown.html

    {{dropdown.title}}

    {% for item in dropdown.itens %}

    title="{{item.label}}"
    {% for meta in item.meta %}
    data-{{meta.label}}="{{meta.valor}}"
    {% endfor %}>{{item.label}}

    {% endfor %}


    iterations

    View Slide

  30. DO YOU WANT TO
    CREATE A UI LIB?
    NO, I DON’T!

    View Slide

  31. View Slide

  32. View Slide

  33. CSS
    VS
    PREPROCESSORS

    View Slide

  34. good parts
    - improve productivity
    - easy to work with modules
    - use of mixins, variables, selector
    inheritance and nesting

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. BAD PRACTICES WITH
    CSS, CAN BE MADE

    View Slide

  40. doing evil with scss!
    .great-grandfather {
    .grandfather {
    .father {
    #wtf {
    color: #f60;
    }
    }
    }
    }
    .great-grandfather
    .grandfather
    .father
    #wtf {
    color: #f60;
    }
    /*
    why high specificity id? */
    SCSS CSS

    View Slide

  41. AUTOMATING
    TASKS

    View Slide

  42. let’s use Grunt?

    View Slide

  43. grunt.js
    - low learning curve
    - large number of plugins
    - huge open source community

    View Slide

  44. I’ve got to con"gure
    node.js?

    View Slide

  45. $ 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

    View Slide

  46. tasks
    - test runners
    - preprocessors
    - js / css lint
    - create sprites
    - concatenation

    View Slide

  47. 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

    View Slide

  48. 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

    View Slide

  49. LET'S CREATE A
    CODING STANDARD?

    View Slide

  50. standards
    - quotes, braces, semicolons
    - Space vs Tab
    - Single quote vs double quotes
    - nomenclatures for functions,
    Object Literal, conditional
    statement...

    View Slide

  51. https://github.com/rwaldron/idiomatic.js/

    View Slide

  52. https://github.com/airbnb/javascript

    View Slide

  53. http://csslint.net/

    View Slide

  54. PERFORMANCE

    View Slide

  55. #everybodyloves

    View Slide

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

    View Slide

  57. http://pitomba.org/

    View Slide

  58. https://github.com/django-compressor/django-compressor

    View Slide

  59. https://github.com/davidsonfellipe/keepfast/

    View Slide

  60. http://browserdiet.com/

    View Slide

  61. What impact
    performance?
    - low conversions
    - low engagement
    - high rejection rates

    View Slide

  62. - fellipe.com/talks
    - github.com/davidsonfellipe
    - twitter.com/davidsonfellipe
    thankyou

    View Slide