Architecture & Workflow of Modern Web Apps

www.aurorasolutions.io1

http://www.aurorasolutions.io


ARCHITECTURE &

WORKFLOW OF

MODERN WEB

APPS


www.aurorasolutions.io

Full Stack Developer & Co-Founder @ Aurora - Provides

Remote Teams specializing in JVM languages and Angular +

Ember

About: Rasheed

LinkedIn: https://se.linkedin.com/in/rasheedwaraich

33

Email: [email protected]

My team at Aurora specializes in:

► Web Apps ◄ Java, Groovy, C# and AngularJS/EmberJS based

single or multi page web apps

► Mobile Apps ◄ Android & iOS

We provide REMOTE teams based in Pakistan which integrate

seamlessly with our customers. We have happy clients across

Europe, USA, Canada & Australia.



https://se.linkedin.com/in/rasheedwaraich

mailto:[email protected]



WHERE WE’VE BEEN



In the beginning...



● Sites were static HTML ● Pros:

o low computational overhead

o highly cacheable

o highly indexable

● Cons:

o hard(easy?) to update

o no personalization

o usually poor UI

6

In the beginning...



Let there be CGI



● Introduced dynamic generated pages ● Pros:

o dynamic!

o selectively cacheable

o highly indexable

o personalizable

● Cons:

o “high” computational overhead

o hard to create

o usually poor UI

8

Let there be CGI



LiveScript JavaScript



● Dynamic Pages

● Lightweight complement to applets

● Mostly used for simple scripting

o basic form validation

o popup ads

o comet cursor trails

● Pros:

o enhanced usability, maybe

o reduced trips to the server

● Cons:

o abuses annoyed users

o business logic often implemented

twice: client and server

10

LiveScript JavaScript



● Google Maps sparked Web 2.0

● GMail

o required Javascript

● Pros:

o killer UI

o more responsive apps

● Cons:

o difficult to cache

o impossible to index

o required JavaScript

11

AJAX - Web 2.0



● No JavaScript, no problem

● Provide features for user agents that

support them

o fall back to basic HTML

● Pros:

o wider compatibility

o just as rich UI

o just as responsive

● Cons:

o higher development costs

o requires thoughtful engineering

12

Unobtrusive JavaScript



● Business logic lives on the client

● Resources and permanent state stored on

the server

● Application and session state stored on

client

● Pros:

o reduce server workloads

o application is highly cacheable

o extreme rich UI

● Cons:

o content not indexable

o requires JavaScript

o often requires a ‘modern’ browser

13

Client Side Applications



THROW A BUNCH OF HTML FILES




ADD A COUPLE OF CSS FILES





ADD SOME JAVASCRIPT FILES





ADD SOME JAVASCRIPT FILES

AND SPAGHETTI IS READY...



EVERYTHING WAS MANUAL!

➔ CREATE DIRECTORY STRUCTURE

➔ DOWNLOAD & SETUP JS LIBRARIES

➔MAKE CHANGE → MOVE TO BROWSER → HIT F5

➔ COMPILE COFFEESCRIPT / SASS / LESS

➔ CODE QUALITY

➔ PERFORM OPTIMIZATIONS

➔ RUN UNIT TESTS!



COME BACK FEW MONTHS LATER

AND TRY TO FIGURE OUT HOW TO

MAINTAIN THE CODE



WHAT DO WE NEED?

WE NEED BETTER TOOLS TO

AUTOMATE THESE TASKS…



MOVING

FORWAR

D



WHERE ARE WE HEADING

TO...



From server-side app to smart clients and services


















A GOOD

DEVELOPMEN

T WORKFLOW

→ HELPS TO GET STARTED



A GOOD

DEVELOPMEN

T WORKFLOW


→ MAINTAINS DEPENDENCIES



A GOOD

DEVELOPMEN

T WORKFLOW



→ ENFORCES BEST PRACTICES



A GOOD

DEVELOPMEN

T WORKFLOW




→ PREPARES TOOLS



A GOOD

DEVELOPMEN

T WORKFLOW




→ PREPARES TOOLS

→ FIGHTS REGRESSIONS



A GOOD

DEVELOPMEN

T WORKFLOW




→ PREPARES TOOLS

→ FIGHTS REGRESSIONS

→ EASES THE RELEASE PROCESS





YO

Got life in 2012!

Various contributors (Employees

from Google, Twitter, etc)

history



YO

- structure

- compilation

- static analysis

- dependencies management

- development tools

- unit testing

scaffolding



YO

> npm install -g yo

download

“-g” global install



YO

Various generators:

● Angular

● Ember

● Backbone

generators

And all the other popular frameworks...



GENERATORSProject templates

● npm install generator-webapp

○ yo webapp

● npm install generator-angular

○ yo angular

○ yo angular:controller MyCtrl

○ yo angular:directive tabs

○ yo angular:route login

● npm search yeoman-generator



YO

yo scaffolds out a new application, writing your Grunt

configuration and pulling in relevant Grunt tasks and

Bower dependencies that you might need for your

build.



YEOMAN HAS FRIENDS



BOWER





BOWERhistory

Package manager for the web

Born in 2012

Created by Twitter and other contributors over time



BOWERdownload

> npm install -g bower



BOWERfind a package

> bower search jquery



BOWERfind available versions

> bower info jquery



BOWERadd a specific dependency

> bower install jquery#1.10.2 --save

install jquery and save this new dependency



BOWER

runtime dependencies in bower.json



BOWERadd all your dependencies

> bower install



BOWERsee your dependencies

> bower list





GRUNT

Grunt is used to build, preview and test your project,

thanks to help from tasks curated by the Yeoman team

and grunt-contrib.



GRUNT

❏test

❏build

❏serve

sample tasks



GRUNT

❏connect

❏ jshint

❏mocha

❏ imagemin, svgmin, htmlmin

❏compass

❏karma

plugins



GRUNT

Configuration in gruntfile.js



GRUNT

3 parts:

❏Task loading

❏Task configuration

❏Task registration

gruntfile.js structure



GRUNT

An example: Static code analysis with JSHINT



GRUNT

HOW TO USE IT?

> grunt

> grunt jshint:all





HTML5 BOILERPLATE

“HTML5 Boilerplate is the professional badass’s

base HTML/CSS/JS template for a fast, robust and

future proof site”

It helps you to quickly get up and running with front-

end web projects

NOT A FRAMEWORK

Bring what you need to your project.



FEATURES

● Browser Compatibility

● favicon.ico for browsers

● Web server configs

○ IIS: web.config

○ Apache: .htaccess

○ nginx: nginx.conf



ADVANCED FEATURES

● Includes meta viewport declaration

● Includes modernizer

● Javascript profiling

● Use conditional comments to add “ie” classes



Allows you to do this in your CSS

div.foo { padding-right: 10px; }

.ie6 div.foo { padding-right: 5px; }





BOOTSTRAP

Sleek, intuitive, and powerful mobile first front-

end framework for faster and easier web

development.



FEATURES

● Scaffolding up to 12 columns

● Nesting columns

● Column ordering

● Grid System

● Responsive design

● many more!



Examples

● Buttons

● Tables





JASMINE

● Jasmine is powerful javascript unit testing framework

● Jasmine describes its test in simple natural language

● Jasmine tests can be read by non-programmers

● Jasmine provides a clean mechanism for synchronous asynchronous code



JASMINE SAMPLE TEST

describe(“A sample suite”, function(){

it(“contains a spec with an expectation”, function(){

expect(true).toEqual(true);

});

});

Main Constructs:

● TestSuite begins with a call to describe().

● TestCase “or spec” begins with a call to it().

● TestCase can contain one or more matcher(s).





KARMA

● Karma is a test runner for JavaScript that runs on Node.js

● It is very well suited to testing AngularJS or any other

JavaScript projects

● It can run test of most popular javascript testing frameworks

like:

○ Jasmine

○ Mocha

○ QUnit

○ etc.

● Karma can execute tests not only in browser of your choice but

also on the platform of your choice (desktop, phone, tablets)


http://nodejs.org/

http://nodejs.org/


INSTALLING KARMA AND RUNNING TEST

> npm install -g karma

> karma init

> karma start

> karma run //karma runs the tests





PHANTOMJS

● PhantomJS is a headless WebKit scriptable with a JavaScript API

● Created by Ariya Hidayat

● PhantomJS itself is NOT a test framework, it is only used to launch

the tests via suitable test runner.



FEATURES

● Multiplatform, available on major operating systems: Windows, Mac

OS X, Linux, other Unices.

● Fast and native implementation of web standards: DOM, CSS,

JavaScript, Canvas, SVG. No emulation!

● Pure headless (no X11) on Linux, ideal for continuous integration

systems. Also runs on Amazon EC2, Heroku, Iron.io.

● Easy to install.



Examples

● It captures screenshot with given width and height also get the

page title





PROTRACTOR

“is an end to end test framework for AngularJS applications built

on top of WebDriverJS.

Protractor runs tests against your application running in a real

browser, interacting with it as a user would.”



FEATURES

● End to End Testing

● Functional Testing

● Automating browsers

● Provide tools to help debugging





AngularJS

● AngularJS is a MVC framework that defines numerous concepts to

properly organize your web application.

● Created by Google.

● It’s a complete client side solution.

● Data binding, as in {{}}.

● DOM control structures for repeating, showing and hiding DOM

fragments.

● Support for forms and form validation.

● Attaching new behavior to DOM elements, such as DOM event

handling.

● Grouping of HTML into reusable components.



AngularJS Core Concepts

● Modules

● Data Bindings

● Controllers

● Directives

● Services

● Scopes

● Routing





Thank you!

86

Q&A

Technology

Architecture & Workflow of Modern Web Apps