Practical guide for front-end development for Django Devs

Good tips for front-end development for Django Apps

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