true beauty is on the inside, but your users are shallow
TRANSCRIPT
- 1. True beauty is on the inside ...but your users are shallow. Loek van Gent 2 June 2015 Writing better front-end code
- 2. PHP (Zend)many, many years Django/Python 3 yearsMe #afk
- 3. Listen up guys, we've got a cool idea... Multi-tenant & white label site
- 4. The big refactor
- 5. Sorry, we could not display the entire diff because too many files (1,805) changed.
- 6. WOW! I REALLY love that new design!!!
- 7. True beauty is on the inside ...but your product manager is shallow.
- 8. So, what's all this fuzz about front-end?
- 9. So, how can we write better front-end code?
- 10. $ django-admin createproject true_beauty $ django-admin startapp heart $ django-admin startapp spirit
- 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. 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. Group your front-end! since 1.8
- 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. 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. Ok. Let's look at some front-end tools.
- 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. Structured CSS: Sass .item { width: $container-width; color: $first-color; .col-4 { width: $container-width / 4; } &:hover {...} }
- 19. Building your front-end: Grunt
- 20. Installing these and other tools: NPM
- 21. This is starting to look like an entire project within my Django project
- 22. Now you're getting it!
- 23. Front-endBack-end
- 24. Django Server to provide data Django Rest Framework
- 25. Full-stack Javascript Framework for front-end Ember, Angular, React...
- 26. Back-end Front-end
- 27. TestingBack-end
- 28. Front-end Mock Api
- 29. Ember CLI
- 30. $ ember new good_looks $ cd good_looks $ ember generate route eyes $ ember generate route smile
- 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. $ ember serve --proxy http://localhost:8000
- 33. Summing it up...
- 34. Love your front-end It's the only thing your users get to see
- 35. Group your front-end
- 36. Use tools to help structure your front-end code
- 37. Start using Ember* It is the future! AngularReact No! Forget about Backbone
- 38. Suggestions? Questions? That's all for now. @loek1pc gannetson