Practical guide for front-end development for django devs
10 likes2,148 views
The document provides an overview of front-end development for Django developers. It discusses using HTML, CSS, JavaScript and other front-end technologies. It recommends using components, preprocessors and task automation like Grunt. It also discusses standards, performance optimization and creating UI libraries.
![$ make grunt-cong
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](https://image.slidesharecdn.com/practicalguideforfront-enddevelopmentfordjangodevs-140504234544-phpapp01/85/Practical-guide-for-front-end-development-for-django-devs-45-320.jpg)
![Gruntle
.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](https://image.slidesharecdn.com/practicalguideforfront-enddevelopmentfordjangodevs-140504234544-phpapp01/85/Practical-guide-for-front-end-development-for-django-devs-48-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Practical guide for front-end development for django devs (20)
![[convergese] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/2012-adaptive-images-convergese-120509135732-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[refreshaustin] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv7-130410122323-phpapp02-thumbnail.jpg?width=560&fit=bounds)
Ad
More from Davidson Fellipe (19)
Ad
Recently uploaded (20)
Practical guide for front-end development for django devs
- 1. davidson fellipe front-end engineer at globo.com PRACTICAL GUIDE FOR FRONT-END DEVELOPMENT FOR DJANGO DEVS
- 2. - HTML ~ 2001 - front-end engineer - globo.com ~ 2010 - more about me at fellipe.com me
- 3. globo.com - 35 multidisciplinary teams using agile methodologies - large open source community - projects at opensource.globo.com
- 4. globo.com - 3 multidisciplinary teams - all engineers code for client side sports at globo.com
- 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
- 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?
- 9. CODE NEEDS TO WORK IN DIFFERENT ENVIRONMENTS
- 10. MULTIPLE BROWSERS MULTIPLE VERSIONS MULTIPLE RESOLUTIONS MULTIPLE DEVICES
- 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...
- 14. IT’S MUCH MORE THAN CONVERT JPG TO HTML
- 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?
- 20. MAKE APPS!
- 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
- 23. our requirements - DRY - components - fonts and icons - similar interactions across site - possibility of themes - low speci"city of CSS
- 24. 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
- 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
- 26. how blocks work? {% 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 TEMPLATE app core TEMPLATE app poll
- 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)
- 29. 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
- 30. DO YOU WANT TO CREATE A UI LIB? NO, I DON’T!
- 34. good parts - improve productivity - easy to work with modules - use of mixins, variables, selector inheritance and nesting
- 39. BAD PRACTICES WITH CSS, CAN BE MADE WORSE WITH PREPROCESSORS
- 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
- 41. AUTOMATING TASKS
- 42. let’s use Grunt?
- 43. grunt.js - low learning curve - large number of plugins - huge open source community
- 44. I’ve got to congure node.js?
- 45. $ make grunt-cong 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
- 46. tasks - test runners - preprocessors - js / css lint - create sprites - concatenation
- 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
- 48. Gruntle .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
- 49. LET'S CREATE A CODING STANDARD?
- 50. standards - quotes, braces, semicolons - Space vs Tab - Single quote vs double quotes - nomenclatures for functions, Object Literal, conditional statement...
- 54. PERFORMANCE
- 55. #everybodyloves
- 61. What impact performance? - low conversions - low engagement - high rejection rates
- 62. - fellipe.com/talks - github.com/davidsonfellipe - twitter.com/davidsonfellipe thankyou