WORKSHOP BUILDING A WEBAPP STEP BY STEP by

WORKSHOP: BUILDING A WEBAPP STEP BY STEP by Ohad Kravchick (@myok 12) Fluent 2013 May 28 th, 2013 Rate me: http: //spkr 8. com/t/23071 Grab me: http: //sdrv. ms/16 YV 4 Rb

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

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 Java. Script? • Modularize your Java. Script • 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

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/myok 12/fluent 2013 -webapp

19 Demo Exercise - Layout • Flex. Box (http: //www. html 5 rocks. com/en/tutorials/flexbox/quick/) • Build the 3 -column UI using Flex. Box • 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 HTML 5 Boilerplate • Semantic HTML, new tags (http: //caniuse. com/) • CSS, especially CSS 3 (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/View. Manager/Router) – Switches from one page to another; renders the correct views and creates a view hierarchy; handles anything unusual

32 Models • Article. Preview – contains: title, thumbnail, byline • Article. Previews – contains a list of Article. Previews • Article – same as Article. Preview, 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) • Article. Preview. View – shows just one article preview on the main page • Will be provided with an Article. Preview. Model for knowing what to show • Section. View – renders many Article. Preview. View as the main page • Will be provided with a Section. Model • Article. View – renders a full article page • Will be provided with an Article. Model

34 Controller/s • Main is our controller for both pages. • We could have broken it to Section. Controller and Article. Controller instead: • Section. Controller – creates the full section page • Loads the Section. Model; will wait until it’s loaded successfully • Instantiates a Section. View, which will instantiate the many Article. Preview. Views • Upon clicking on article, will instantiate Article. Controller • Article. Controller – creates a full article page • Loads/receives the Article. Model; will wait until it’s loaded successfully • Instantiates an Article. View • Upon clicking on Back, will instantiate a Section. Controller

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 • Phone. Gap • Socket. io

FIN. QUESTIONS? BUILDING A WEBAPP STEP BY STEP by Ohad Kravchick (@myok 12) Fluent 2013 May 28 th, 2013 Rate me: http: //spkr 8. com/t/23071 Grab me: http: //sdrv. ms/16 YV 4 Rb