Building a webapp - Cdn.oreilly.com

disgustedtukwilaInternet and Web Development

Dec 14, 2013 (3 years and 5 months ago)

230 views

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
ArticlePreview
s


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


W
ill 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
ArticlePreviewView
s


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
Article
View


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