Web Tooling - September 2012

Talk about tooling requirements for medium to large web projects with a mixture of JavaScript, CSS and other assets.

Transcript

1. Web Tooling September 1st 2012 @ NConf
2. Sebastian Werner @wpbasti sebastian-werner.net
3. Software Developer Schlund + Partner 1&1 studiVZ Deutsche Telekom Zynga Germany 2002-2003 2004-2008 2008-2009 2009-2011 2011-2012 Karlsruhe - Berlin - Darmstadt - Frankfurt
4. Open Source qooxdoo Unify Core Jasy Scroller API Browser
5. Topics JavaScript Python Tooling UX Publishing Mobile Twitter Apple
6. Content JavaScript, CSS, HTML, Graphics, Audio, Video
7. Bundle & Compress
8. Unfortunately some Bad News
9. It‘s not that easy!
10. Let‘s start positive...
11. Solved JavaScript Compression Uglify Closure Compiler YUI Compressor
12. Solved CSS Pre-Processors Less Sass Stylus
13. Solved Image Optimizers PNGQuant OptiPNG ImageOptim
14. Solved Testing QUnit Jasmine Mocca PhantomJS
15. Solved Linting JS Hint
16. Imagine ...your application uses an IconManager to access a single icon markup by its resource name...
17. ...this class is implemented in CoffeeScript offered by shared library you are using...
18. ... it uses a CSS file to include icons via background image...
19. ...which refers to icons in your official icon pool...
20. ...icons should only be deployed if they are actually used by your application...
21. ...and combined into a sprite sheet for optimal transmission to the browser...
22. ...and by the way: the icon quality depends on the actual device the visitor is using...
23. Urgh
24. The Initiative
25. 1. Project IDs Globally known unique identifier for every project
26. 2. Project Dependencies Path Normalization Auto Cloning Duplication Handling
27. 3. File Identifiers Matching exported symbol
28. 4. Auto Dependencies myapp/Main.js uses sharedlib/IconManager.js uses iconpool/save.png
29. 5. Asset Workflow URL Free Image Sprites Images Animations Optimizing Images Compressing CSS Inlining Externals
30. 6. Localization Date Formats Number Formats Calendar Rules Plural Rules Overhead Free
31. 7. Translations Gettext / ICU Plural Support Placeholders Sync Implementation
32. 8. Pre Processing Traceur / CoffeeScript Sass / Less / Stylus Handlebars / Mustache
33. 9. Deployment Self Contained Checksummed Output Publish/Sync to CDN Cache Manifests 3rd Party Integration
34. 10. Web Server During Development Proxying Remotes Easy to Configure
35. 11. Packages Fast Start Load on Demand Semi Automatically Translations Asset Data
36. 12. Permutations Devices Locales Languages Feature Sets Styles Settings
37. 13. Documentation Cross Project DRY Markdown
38. 14. Scaffolding Boilerplate Customization Download Free
39. 15. Finally Cross Platform Consistent Scriptable Extendable Hackable
40. The Jasy Initiative Tool For Modern Web Development
41. Two Years of Development About Initiator Owner Contributor Sebastian Werner Zynga Germany Deutsche Telekom
42. Python 3 Spriting Engine Image Meta Data Dependencies JavaScript Parser Class Sorter Development Version Self Contained Unique IDs Git Auto Cloning Powerful Scaffolding Cross Platform Integrated Web Server Fully Scriptable Easily Extendable API Generator JavaScript Compressor Image Animations CDLR Localization Gettext Translation Efficient Binary Cache Markdown JSON or YAML Permutations File Loaders Multi Project
43. Jasy 0.8 Will be released end of September Currently at 0.8-beta2 http://zynga.github.com/jasy
44. Some Todos Asset Workflow (Processing / Optimizing) Pre-Processing Code / Templates Synchronization for Translations Automatic Code Packaging Testing / Lint Integration
45. Thank You @wpbasti sebastian-werner.net http://zynga.github.com/jasy