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

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: http://github.com/myok12/fluent2013-webapp

18

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

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 (http://caniuse.com/)• CSS, especially CSS3 (gradients, transitions, translations, regions, ...)• Become a JS ninja

20

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

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• http://visionmedia.github.com/mocha/• Describe• It

• Expectations - http://chaijs.com/api/bdd/• 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 (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

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 (@myok12)

Fluent 2013       May 28th, 2013

Rate me: http://spkr8.com/t/23071

Grab me: http://sdrv.ms/16YV4Rb