WORKSHOP: BUILDING A WEBAPP STEP BY STEP by Ohad Kravchick Fluent 2013 May 28th, 2013 Rate me: Grab me:

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 2

INTRODUCTION

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 4

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 5

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 6

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 7

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 8

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 9

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 10

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 11

BUILDING A SKELETON

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 13

Section Page List of stories Later: Spinner while loading 14

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

On a device 16

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

Demo – code structure Boilerplate HTML markup Boilerplate JS markup + onload invocation Boilerplate CSS markup + reset css Fork it: 18

Demo Exercise - Layout FlexBox ( ) 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 19

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 ( CSS, especially CSS3 (gradients, transitions, translations, regions,...) Become a JS ninja 20

Breaking it into multiple files JS – using require.js ( 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 ( Include the LESS preprocessor script Output all css files in a src folder into the reader.css file Later, automate this transpiling for production 21

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” 22

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 23

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

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 25

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 26

Test-driven development (TDD) Mocha Describe It Expectations - Reporters Dependency injection 27

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” 28

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, … 29

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 30

MVC Divide code into classes Separate classes for the Section page and Article page Backbone.js ( 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 31

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 32

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 33

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 34

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” 35

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

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

FIN. QUESTIONS? BUILDING A WEBAPP STEP BY STEP by Ohad Kravchick Fluent 2013 May 28th, 2013 Rate me: Grab me: