architecture & workflow of modern web apps
TRANSCRIPT
![Page 3: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/3.jpg)
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.
www.aurorasolutions.io
![Page 6: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/6.jpg)
www.aurorasolutions.io
● 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...
![Page 8: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/8.jpg)
www.aurorasolutions.io
● 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
![Page 10: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/10.jpg)
www.aurorasolutions.io
● 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
![Page 11: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/11.jpg)
www.aurorasolutions.io
● 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
![Page 12: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/12.jpg)
www.aurorasolutions.io
● 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
![Page 13: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/13.jpg)
www.aurorasolutions.io
● 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
![Page 15: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/15.jpg)
www.aurorasolutions.io15
THROW A BUNCH OF HTML FILES
ADD A COUPLE OF CSS FILES
![Page 16: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/16.jpg)
www.aurorasolutions.io16
THROW A BUNCH OF HTML FILES
ADD A COUPLE OF CSS FILES
ADD SOME JAVASCRIPT FILES
![Page 17: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/17.jpg)
www.aurorasolutions.io17
THROW A BUNCH OF HTML FILES
ADD A COUPLE OF CSS FILES
ADD SOME JAVASCRIPT FILES
AND SPAGHETTI IS READY...
![Page 18: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/18.jpg)
www.aurorasolutions.io18
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!
![Page 19: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/19.jpg)
www.aurorasolutions.io19
COME BACK FEW MONTHS LATER
AND TRY TO FIGURE OUT HOW TO
MAINTAIN THE CODE
![Page 20: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/20.jpg)
www.aurorasolutions.io20
WHAT DO WE NEED?
WE NEED BETTER TOOLS TO
AUTOMATE THESE TASKS…
![Page 23: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/23.jpg)
www.aurorasolutions.io23
From server-side app to smart clients and services
![Page 24: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/24.jpg)
www.aurorasolutions.io24
From server-side app to smart clients and services
![Page 25: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/25.jpg)
www.aurorasolutions.io25
From server-side app to smart clients and services
![Page 26: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/26.jpg)
www.aurorasolutions.io26
From server-side app to smart clients and services
![Page 27: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/27.jpg)
www.aurorasolutions.io27
From server-side app to smart clients and services
![Page 28: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/28.jpg)
www.aurorasolutions.io28
From server-side app to smart clients and services
![Page 29: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/29.jpg)
www.aurorasolutions.io29
A GOOD
DEVELOPMEN
T WORKFLOW
→ HELPS TO GET STARTED
![Page 30: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/30.jpg)
www.aurorasolutions.io30
A GOOD
DEVELOPMEN
T WORKFLOW
→ HELPS TO GET STARTED
→ MAINTAINS DEPENDENCIES
![Page 31: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/31.jpg)
www.aurorasolutions.io31
A GOOD
DEVELOPMEN
T WORKFLOW
→ HELPS TO GET STARTED
→ MAINTAINS DEPENDENCIES
→ ENFORCES BEST PRACTICES
![Page 32: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/32.jpg)
www.aurorasolutions.io32
A GOOD
DEVELOPMEN
T WORKFLOW
→ HELPS TO GET STARTED
→ MAINTAINS DEPENDENCIES
→ ENFORCES BEST PRACTICES
→ PREPARES TOOLS
![Page 33: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/33.jpg)
www.aurorasolutions.io33
A GOOD
DEVELOPMEN
T WORKFLOW
→ HELPS TO GET STARTED
→ MAINTAINS DEPENDENCIES
→ ENFORCES BEST PRACTICES
→ PREPARES TOOLS
→ FIGHTS REGRESSIONS
![Page 34: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/34.jpg)
www.aurorasolutions.io34
A GOOD
DEVELOPMEN
T WORKFLOW
→ HELPS TO GET STARTED
→ MAINTAINS DEPENDENCIES
→ ENFORCES BEST PRACTICES
→ PREPARES TOOLS
→ FIGHTS REGRESSIONS
→ EASES THE RELEASE PROCESS
![Page 36: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/36.jpg)
www.aurorasolutions.io36
YO
Got life in 2012!
Various contributors (Employees
from Google, Twitter, etc)
history
![Page 37: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/37.jpg)
www.aurorasolutions.io37
YO
- structure
- compilation
- static analysis
- dependencies management
- development tools
- unit testing
scaffolding
![Page 38: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/38.jpg)
www.aurorasolutions.io38
YO
> npm install -g yo
download
“-g” global install
![Page 39: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/39.jpg)
www.aurorasolutions.io39
YO
Various generators:
● Angular
● Ember
● Backbone
generators
And all the other popular frameworks...
![Page 40: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/40.jpg)
www.aurorasolutions.io40
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
![Page 41: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/41.jpg)
www.aurorasolutions.io41
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.
![Page 45: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/45.jpg)
www.aurorasolutions.io45
BOWERhistory
Package manager for the web
Born in 2012
Created by Twitter and other contributors over time
![Page 48: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/48.jpg)
www.aurorasolutions.io48
BOWERfind available versions
> bower info jquery
![Page 49: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/49.jpg)
www.aurorasolutions.io49
BOWERadd a specific dependency
> bower install jquery#1.10.2 --save
install jquery and save this new dependency
![Page 51: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/51.jpg)
www.aurorasolutions.io51
BOWERadd all your dependencies
> bower install
![Page 54: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/54.jpg)
www.aurorasolutions.io54
GRUNT
Grunt is used to build, preview and test your project,
thanks to help from tasks curated by the Yeoman team
and grunt-contrib.
![Page 56: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/56.jpg)
www.aurorasolutions.io56
GRUNT
❏connect
❏ jshint
❏mocha
❏ imagemin, svgmin, htmlmin
❏compass
❏karma
plugins
![Page 58: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/58.jpg)
www.aurorasolutions.io58
GRUNT
3 parts:
❏Task loading
❏Task configuration
❏Task registration
gruntfile.js structure
![Page 59: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/59.jpg)
www.aurorasolutions.io59
GRUNT
An example: Static code analysis with JSHINT
![Page 60: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/60.jpg)
www.aurorasolutions.io60
GRUNT
HOW TO USE IT?
> grunt
> grunt jshint:all
![Page 62: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/62.jpg)
www.aurorasolutions.io62
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.
![Page 63: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/63.jpg)
www.aurorasolutions.io63
FEATURES
● Browser Compatibility
● favicon.ico for browsers
● Web server configs
○ IIS: web.config
○ Apache: .htaccess
○ nginx: nginx.conf
![Page 64: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/64.jpg)
www.aurorasolutions.io64
ADVANCED FEATURES
● Includes meta viewport declaration
● Includes modernizer
● Javascript profiling
● Use conditional comments to add “ie” classes
<!--[if IE 9]> <html lang=”en” class=”nojs ie9”> <![endif]-->
Allows you to do this in your CSS
div.foo { padding-right: 10px; }
.ie6 div.foo { padding-right: 5px; }
![Page 66: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/66.jpg)
www.aurorasolutions.io66
BOOTSTRAP
Sleek, intuitive, and powerful mobile first front-
end framework for faster and easier web
development.
![Page 67: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/67.jpg)
www.aurorasolutions.io67
FEATURES
● Scaffolding up to 12 columns
● Nesting columns
● Column ordering
● Grid System
● Responsive design
● many more!
![Page 70: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/70.jpg)
www.aurorasolutions.io70
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
![Page 71: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/71.jpg)
www.aurorasolutions.io71
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).
![Page 73: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/73.jpg)
www.aurorasolutions.io73
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)
![Page 74: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/74.jpg)
www.aurorasolutions.io74
INSTALLING KARMA AND RUNNING TEST
> npm install -g karma
> karma init
> karma start
> karma run //karma runs the tests
![Page 76: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/76.jpg)
www.aurorasolutions.io76
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.
![Page 77: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/77.jpg)
www.aurorasolutions.io77
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.
![Page 78: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/78.jpg)
www.aurorasolutions.io78
Examples
● It captures screenshot with given width and height also get the
page title
![Page 80: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/80.jpg)
www.aurorasolutions.io80
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.”
![Page 81: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/81.jpg)
www.aurorasolutions.io81
FEATURES
● End to End Testing
● Functional Testing
● Automating browsers
● Provide tools to help debugging
![Page 83: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/83.jpg)
www.aurorasolutions.io83
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.
![Page 84: Architecture & Workflow of Modern Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022042614/55a525591a28abea0e8b4666/html5/thumbnails/84.jpg)
www.aurorasolutions.io84
AngularJS Core Concepts
● Modules
● Data Bindings
● Controllers
● Directives
● Services
● Scopes
● Routing