1. 1. True beauty is on the inside ...but your users are shallow. Loek van Gent 2 June 2015 Writing better front-end code
2. 2. PHP (Zend)many, many years Django/Python 3 yearsMe #afk
3. 3. Listen up guys, we've got a cool idea... Multi-tenant & white label site
4. 4. The big refactor
5. 5. Sorry, we could not display the entire diff because too many files (1,805) changed.
6. 6. WOW! I REALLY love that new design!!!
7. 7. True beauty is on the inside ...but your product manager is shallow.
8. 8. So, what's all this fuzz about front-end?
9. 9. So, how can we write better front-end code?
10. 10. $ django-admin createproject true_beauty $ django-admin startapp heart $ django-admin startapp spirit
11. 11. Typical Django Project Layout true_beauty __init__.py settings.py urls.py wsgi.py manage.py spirit __init__.py models.py tests.py views.py heart __init__.py models.py tests.py views.py
12. 12. true_beauty heart models.py tests.py views.py templates heart static css js spirit models.py tests.py views.py templates spirit static css js Typical Django Project Layout
13. 13. Group your front-end! since 1.8
14. 14. Django Project Layout true_beauty __init__.py settings.py urls.py wsgi.py templates static manage.py spirit __init__.py models.py tests.py views.py heart __init__.py models.py tests.py views.py you are here
15. 15. Django Project Layout true_beauty __init__.py settings.py urls.py wsgi.py templates static manage.py spirit __init__.py models.py tests.py views.py heart __init__.py models.py tests.py views.py you are here front-end guys
16. 16. Ok. Let's look at some front-end tools.
17. 17. JS requirements: Bower { "name": "true_beauty", "description": "True beauty", "dependencies": { "jquery-ui": "~1.11.4", "jquery": "1.8.3", "moment": "2.9.0", } }
18. 18. Structured CSS: Sass .item { width: $container-width; color: $first-color; .col-4 { width: $container-width / 4; } &:hover {...} }
19. 19. Building your front-end: Grunt
20. 20. Installing these and other tools: NPM
21. 21. This is starting to look like an entire project within my Django project
22. 22. Now you're getting it!
23. 23. Front-endBack-end
24. 24. Django Server to provide data Django Rest Framework
25. 25. Full-stack Javascript Framework for front-end Ember, Angular, React...
26. 26. Back-end Front-end
27. 27. TestingBack-end
28. 28. Front-end Mock Api
29. 29. Ember CLI
30. 30. $ ember new good_looks $ cd good_looks $ ember generate route eyes $ ember generate route smile
31. 31. Typical Ember Project Layout app/ app.js index.html routes models views controllers components eyes.js smile.js templates application.hbs eyes.hbs smile.hbs
32. 32. $ ember serve --proxy http://localhost:8000
33. 33. Summing it up...
34. 34. Love your front-end It's the only thing your users get to see
35. 35. Group your front-end
36. 36. Use tools to help structure your front-end code
37. 37. Start using Ember* It is the future! AngularReact No! Forget about Backbone
38. 38. Suggestions? Questions? That's all for now. @loek1pc gannetson