Upgrade your Web Development Toolchain by Blaise Laflamme

Transcript

1. Upgrade your Web Development Toolchain Blaise Laflamme Pycon 2014
2. About Me • Full-Stack Web Development • Lead Projects • Lead Teams • Still learning a lot everyday
3. What This Talk is About • Ideas and patterns • Combining tools • Working with people on projects
4. What This Talk is not About • Strong opinions • Cookbook recipes • In-depth technical examples
5. Best Practices & Patterns • Dogmatism is never a good thing • Should always have a significant benefit • Stick to what really makes a difference
6. Problems to Solve • Tie up multiple in-development projects • Tie up multiple environments & tools • Mix up development teams
7. Point Of View • Separation of concerns • Use known tools • Adapt to context
8. What will people do if You die!
9. Project Workflow • Server provisioning & setup • WebApp development • Application deployment
10. Provisioning & Deployment • Developer’s machine • Dedicated, Linode, Rackspace, Heroku, … • Ansible, Saltstack, Chef, Puppet, Docker, …
11. We should not care
12. They should call you in their process
13. App Environment should be self-contained
14. Running on multiple platforms and environments provides a better tested and robust codebase
15. WebApp Development • Back end • Python, frameworks, template engines, … • Front end • HTML, CSS, Javascript, frameworks, …
16. They have both developed their own expertise, tools and workflows
17. Package Management Back end Package Management $ easy_install pyramid
 $ easy_install pyramid==1.5
 $ pip install pyramid
 $ pip install pyramid==1.5 Front end Package Management $ bower install jquery
 $ bower install jquery#1.11.0
18. Package Management Back end Package Management setup(
 name='myproject',
 version=0.1.0,
 install_requires=[‘pyramid==1.5’]
 ) Front end Package Management {
 "name": "myproject-resources",
 "version": "0.1.0",
 "dependencies": {
 "jquery": “1.11.0”
 }
 }
19. What is Bower? A package manager for the web
20. Assets Management Back end Assets Management from webassets import Bundle all_js = Bundle(
 Bundle('common/libs/jquery/jquery.js'),
 filters='jsmin',
 output='gen/packed.js'
 )
 
 >>> env['all_js'].urls() ('/media/gen/packed.js',)
21. Assets Management Front end Assets Management module.exports = function (grunt) {
 grunt.initConfig({
 jsmin-sourcemap: {
 dist: {
 src: 'common/libs/jquery/jquery.js',
 dest: 'gen/packed.js'
 }
 },
 });
 grunt.loadNpmTasks('grunt-jsmin-sourcemap');
 grunt.registerTask('dist', [
 'jsmin-sourcemap:dist'
 ]);
 };
22. What is Grunt? A task runner for automation
23. Frontend also need • Some sort of include/import/require • Ability to load nested dependencies
24. Frontend also need Front end dependencies and requirements require.config({
 paths: {
 jquery: 'libs/jquery-1.11.0'
 }
 });
 
 …
 
 require( ['jquery'], function( $ ) {
 
 });
25. Why would you want frontend to rely on backend dependancy?
26. You reach a point of separation • Advanced hybrid-application • SPA (Single Page App) • Backend as an API
27. You’ll benefit from splitting to multiple projects • One project per team or «concerns» • Use same global app or project environment • Share common set of tools and patterns
28. Buildout • Application-centric • For assembly and deployment • Make assembly of programs repeatable
29. Buildout • Uses extendable configuration files • Uses extensions • Uses recipes
30. Buildout [buildout] extensions = mr.developer extends = https://raw.github.com/reebalazs/ buildout.javascript.yeoman/master/yeoman.cfg parts+ = dirs eggs bower_modules develop = src/myapp1 src/myapp2 ! [dirs] recipe = z3c.recipe.mkdir paths = var
31. Buildout [sources] myapp1 = git git@github.com:blaflamme/myapp1.git myapp2 = git git@github.com:blaflamme/myapp2.git ! [eggs] recipe = zc.recipe.egg dependent-scripts = true eggs = appenlight-client myapp1 myapp2 interpreter = py
32. Provide a development project that builds the application environment
33. myapp-dev project .
 ├── Gruntfile.js
 ├── Makefile
 ├── bootstrap.py
 ├── bower.json
 ├── buildout.cfg
 ├── etc
 └── package.json
34. Buildout Project Setting the project $ git clone git@github.com:blaflamme/myapp-dev.git
 $ cd myapp-dev
 $ virtualenv .
 $ bin/python bootstrap.py
 $ bin/buildout
35. You’re done!
36. myapp-dev project . ├── Gruntfile.js
 ├── Makefile
 ├── bin
 ├── bootstrap.py
 ├── bower.json
 ├── buildout.cfg
 ├── components
 ├── develop-eggs
 ├── eggs
 ├── etc
 ├── include
 ├── lib
 ├── node_modules
 ├── package.json
 ├── parts
 ├── src
 └── var
37. Command Line API • Wrap multiple commands under simpler API • Use Makefiles, Make is a good tool for this ;)
38. Makefile HERE = $(shell pwd)
 BIN = $(HERE)/bin
 VIRTUALENV = virtualenv
 PYTHON = $(HERE)/bin/python
 
 virtualenv:
 $(VIRTUALENV) . bootstrap:
 $(PYTHON) bootstrap.py buildout:
 $(BIN)/buildout
 
 setup:
 virtualenv bootstrap buildout
39. Makefile $ git clone git@github.com:blaflamme/myapp-dev.git
 $ cd myapp-dev
 $ make setup
40. Conclusion • Isolate Application Environment • Organize projects in a flexible way • Give more power to user & team
41. Questions?