workshop: building a webapp step by step
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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