Workshop: Building a webapp Step By Step

1. Workshop:Building a webapp Step By Step by Ohad Kravchick (@myok12) Fluent 2013       May 28th, 2013 Rate me: http://spkr8.com/t/23071 Grab me: http://sdrv.ms/16YV4Rb

2. Overview • Introduction • Setting up a simple skeleton app using HTML, JS, CSS, Require.js, and Backbone • Building a Simple Model and View classes, and testing them • Taking our classes to the next level • Automating our continuous integration and deployment processes • Conclusion

3. Introduction

4. Introduction • What is a single-page webapp? • How should we use our HTML and DOM, JS, CSS? • Setting up a good coding strategy: good tools and dev environment, modularizing code, test-driven development, continuous integration • As always, think about your users: page load time, network traffic, caching

5. Single-page webapp? • What is a single-page webapp? • What does one entail? • Should I build one? • Plugging everything yourself vs. using a monolithic framework

6. What is a single-page webapp? • One main HTML file • One screen at any given time • Generating (or toggling) other screens dynamically, using JS • Instead of navigating between different pages, one navigates between different sections of one web page • Maintaining state – what’s currently in the DOM • Maintaining data – what’s needed for generating DOM

7. How should we use our HTML and DOM? • HTML should hold all markup • Your application’s viewport • Dynamic content – in templates • DOM should not hold data, but UI • Should probably contain only what’s visible to the user

8. How should we use our JavaScript? • Modularize your JavaScript • Use an MV* framework as a start • Organize code into files and folders • We will use Require.js to not penalize our users • Use one coding style • Tests require even more code modularity for simulating code interactions (stubbing) • Don’t try to “privatize”; allow for overriding

9. How should we use our CSS? • Break CSS into smaller files • Use a CSS preprocessor to concatenate imports • Since our JS code and HTML templates are modularized, we can strive the same for CSS • Module-based CSS

10. Combining it all • Your code is modularized into units/components • You can match JS and CSS, and even template file structure • During development, you want to see/debug all the files • In production, you want to concat, minify, and uglify as much as possible

11. Test-driven development • When you create your JS and CSS files, also create your test files • Start by writing simple tests against the core of the code • Write code, run tests, loop until green • Write more tests – edge cases, interactions, load • The process takes some time to adjust to, but is simply awesome

12. Building a Skeleton

13. Our basic application – a news reader • Main screen – showing all headlines with images (henceforth a Section page) • Clicking on any article, brings up the full article (henceforth an Article page) • Clicking on a Back button in the Article page, brings you back to the Section page

14. Section Page List of stories Later: Spinner while loading

15. Article Page Entire article content Back button Later: Spinner while loading

16. On a device

17. Code structure • HTML file – reader.html • Includes reader.js and all our JS • And includes reader.css and all our CSS

18. Demo – code structure • Boilerplate HTML markup • Boilerplate JS markup + onload invocation • Boilerplate CSS markup + reset css • Fork it: http://github.com/myok12/fluent2013-webapp

19. Demo Exercise - Layout • FlexBox (http://www.html5rocks.com/en/tutorials/flexbox/quick/) • Build the 3-column UI using FlexBox • don’t worry about content yet • Will start at: “git checkout 0.9_minimal_skeleton” • Images are in a"/images" folder

20. Review – Layout • Follow along: “git checkout 1_minimal_app” • We've used webkit's flexbox • There's a draft of a standard (a bit different syntax) • What’s next? • Using HTML5 Boilerplate • Semantic HTML, new tags (http://caniuse.com/) • CSS, especially CSS3 (gradients, transitions, translations, regions, ...) • Become a JS ninja

21. Breaking it into multiple files • JS – using require.js (http://requirejs.org/) • Include the require.js script • Wrap our reader.js with AMD • Include reader.js using require.js in our HTML file • Then require other files • CSS – using less (http://lesscss.org/) • Include the LESS preprocessor script • Output all css files in a src folder into the reader.css file • Later, automate this transpiling for production

22. Exercise – Breaking JS into multiple files • Breaking up JS code: • Require.js and showing our js still works (alert) • Start at: “git checkout 1_minimal_app”

23. Review – Breaking JS into multiple files • Follow along: “git checkout 2_with_require_js” • What’s next? • Plugins (! text for templates ) • r.js for packaging • node-like packages • Read the source

24. Demo Exercise – Breaking CSS into files • Breaking up CSS code: • Use LESS and convert some CSS • Start at: “git checkout 2_with_require_js”

25. Review – Breaking CSS into files • Follow along: “git checkout 3_with_less” • What’s next? • Learn ALL less features • Incorporate less helpers (e.g. vendor-prefix) • Use less compiler to package standard css

26. Test-driven development (TDD) • When is it appropriate? • We will build each of our “classes” by: • Creating the boilerplate file • Creating a test file for it • Writing the standard test and seeing it fails (no implementation) • Writing the code, rerunning the test with every save • For that, we’ll install node.js (+npm) and mocha.js • We’ll automate running the tests with every save

27. Test-driven development (TDD) • Mocha • http://visionmedia.github.com/mocha/ • Describe • It • Expectations - http://chaijs.com/api/bdd/ • Reporters • Dependency injection

28. Demo Exercise – Supporting TDD • Adding a tests folder • Building a simple test file for our simple main.js • Running tests • Command Line Options • Start at: “git checkout 3.99_before_tests”

29. Review – Supporting TDD • Follow along: “git checkout 4_with_tests” • What’s next? • Adjust to TDD style • Write tests for ANY project • Expand your tests: unit-level, integration, black box, UI, …

30. Server Side • Let's inspect our api provider(/api) • Uses node.js and a few frameworks: • express for routing HTTP requests • can easily compile less and require.js files upon change • serving static files • optimist for command line parsing

31. MVC • Divide code into classes • Separate classes for the Section page and Article page • Backbone.js (http://backbonejs.org/) • We will further divide code into different classes for: • Model – defining, fetching, validating, storing and reloading our data • View – defines a screen or a part of the screen (component); builds the DOM, clears the DOM, handles interaction with the DOM • Controller (/Presenter/ViewManager/Router) – Switches from one page to another; renders the correct views and creates a view hierarchy; handles anything unusual

32. Models • ArticlePreview – contains: title, thumbnail, byline • ArticlePreviews – contains a list of ArticlePreviews • Article – same as ArticlePreview, but also contains: body, images • A model can easily be tested: • After it’s loaded, we can inspect it’s expected fields • Then, we can unit test our models by stubbing a request for the data and validating the output for normal fetch or for any edge case

33. Views • All views will be provided with a DOM element to output into • Will allow us to render elements off-screen and attach once all rendering finishes • Will allow us to easily test a view, in memory (or node.js) • ArticlePreviewView – shows just one article preview on the main page • Will be provided with an ArticlePreviewModel for knowing what to show • SectionView – renders many ArticlePreviewView as the main page • Will be provided with a SectionModel • ArticleView – renders a full article page • Will be provided with an ArticleModel

34. Controller/s • Main is our controller for both pages. • We could have broken it to SectionController and ArticleController instead: • SectionController – creates the full section page • Loads the SectionModel; will wait until it’s loaded successfully • Instantiates a SectionView, which will instantiate the many ArticlePreviewViews • Upon clicking on article, will instantiate ArticleController • ArticleController – creates a full article page • Loads/receives the ArticleModel; will wait until it’s loaded successfully • Instantiates an ArticleView • Upon clicking on Back, will instantiate a SectionController

35. Exercise – Building our classes • Building and testing the models • Building and testing the views • Also demoing the views in the browser • Building and testing the controllers and gluing everything together • Start at: “git checkout 4.99_api”

36. Review – Building our classes • Follow along: “git checkout 5_with_backbone” • What’s next? • Implement a router • Loading spinner

37. What’s next? • App enhancements (sections, images, media, sharing, …) • Deployment process • Responsive design • Offline support • PhoneGap • Socket.io

38. Fin. Questions?Building a webapp Step By Step by Ohad Kravchick (@myok12) Fluent 2013       May 28th, 2013 Rate me: http://spkr8.com/t/23071 Grab me: http://sdrv.ms/16YV4Rb