Architecture & Workflow of Modern Web Apps

www.aurorasolutions.io
2
ARCHITECTURE &
WORKFLOW OF
MODERN WEB
APPS

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: rasheed@aurorasolutions.io
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.

4
WHERE WE’VE BEEN

5
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...

7
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

9
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

14
THROW A BUNCH OF HTML FILES

15
ADD A COUPLE OF CSS FILES

16
ADD SOME JAVASCRIPT FILES

17
ADD SOME JAVASCRIPT FILES
AND SPAGHETTI IS READY...

18
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!

19
COME BACK FEW MONTHS LATER
AND TRY TO FIGURE OUT HOW TO
MAINTAIN THE CODE

20
WHAT DO WE NEED?
WE NEED BETTER TOOLS TO
AUTOMATE THESE TASKS…

21
MOVING
FORWAR
D

22
WHERE ARE WE HEADING
TO...

23
From server-side app to smart clients and services

24

25

26

27

28

29
A GOOD
DEVELOPMEN
T WORKFLOW
→ HELPS TO GET STARTED

30
A GOOD
DEVELOPMEN
T WORKFLOW
→ MAINTAINS DEPENDENCIES

31
A GOOD
DEVELOPMEN
T WORKFLOW
→ ENFORCES BEST PRACTICES

32
A GOOD
DEVELOPMEN
T WORKFLOW
→ PREPARES TOOLS

33
A GOOD
DEVELOPMEN
T WORKFLOW
→ PREPARES TOOLS
→ FIGHTS REGRESSIONS

34
A GOOD
DEVELOPMEN
T WORKFLOW
→ PREPARES TOOLS
→ FIGHTS REGRESSIONS
→ EASES THE RELEASE PROCESS

36
YO
Got life in 2012!
Various contributors (Employees
from Google, Twitter, etc)
history

37
YO
- structure
- compilation
- static analysis
- dependencies management
- development tools
- unit testing
scaffolding

38
YO
> npm install -g yo
download
“-g” global install

39
YO
Various generators:
● Angular
● Ember
● Backbone
generators
And all the other popular frameworks...

40
GENERATORS
Project 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

41
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.

42
YEOMAN HAS FRIENDS

43
BOWER

45
BOWERhistory
Package manager for the web
Born in 2012
Created by Twitter and other contributors over time

46
BOWERdownload
> npm install -g bower

47
BOWERfind a package
> bower search jquery

48
BOWERfind available versions
> bower info jquery

49
BOWERadd a specific dependency
> bower install jquery#1.10.2 --save
install jquery and save this new dependency

50
BOWER
runtime dependencies in bower.json

51
BOWERadd all your dependencies
> bower install

52
BOWERsee your dependencies
> bower list

54
GRUNT
Grunt is used to build, preview and test your project,
thanks to help from tasks curated by the Yeoman team
and grunt-contrib.

55
GRUNT
❏test
❏build
❏serve
sample tasks

56
GRUNT
❏connect
❏jshint
❏mocha
❏imagemin, svgmin, htmlmin
❏compass
❏karma
plugins

57
GRUNT
Configuration in gruntfile.js

58
GRUNT
3 parts:
❏Task loading
❏Task configuration
❏Task registration
gruntfile.js structure

59
GRUNT
An example: Static code analysis with JSHINT

60
GRUNT
HOW TO USE IT?
> grunt
> grunt jshint:all

62
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.

63
FEATURES
● Browser Compatibility
● favicon.ico for browsers
● Web server configs
○ IIS: web.config
○ Apache: .htaccess
○ nginx: nginx.conf

64
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; }

66
BOOTSTRAP
Sleek, intuitive, and powerful mobile first front-
end framework for faster and easier web
development.

67
FEATURES
● Scaffolding up to 12 columns
● Nesting columns
● Column ordering
● Grid System
● Responsive design
● many more!

68
Examples
● Buttons
● Tables

70
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

71
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).

73
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)

74
INSTALLING KARMA AND RUNNING TEST
> npm install -g karma
> karma init
> karma start
> karma run //karma runs the tests

76
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.

77
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.

78
Examples
● It captures screenshot with given width and height also get the
page title

80
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.”

81
FEATURES
● End to End Testing
● Functional Testing
● Automating browsers
● Provide tools to help debugging

83
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.

84
AngularJS Core Concepts
● Modules
● Data Bindings
● Controllers
● Directives
● Services
● Scopes
● Routing

Thank you!
86
Q&A

Architecture & Workflow of Modern Web Apps

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Architecture & Workflow of Modern Web Apps

Similar to Architecture & Workflow of Modern Web Apps (20)

Recently uploaded

Recently uploaded (20)

Architecture & Workflow of Modern Web Apps

Editor's Notes