architecture & workflow of modern web apps
Post on 14-Jul-2015
1.199 Views
Preview:
TRANSCRIPT
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: 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.
www.aurorasolutions.io
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...
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
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
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
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
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
www.aurorasolutions.io15
THROW A BUNCH OF HTML FILES
ADD A COUPLE OF CSS FILES
www.aurorasolutions.io16
THROW A BUNCH OF HTML FILES
ADD A COUPLE OF CSS FILES
ADD SOME JAVASCRIPT FILES
www.aurorasolutions.io17
THROW A BUNCH OF HTML FILES
ADD A COUPLE OF CSS FILES
ADD SOME JAVASCRIPT FILES
AND SPAGHETTI IS READY...
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!
www.aurorasolutions.io19
COME BACK FEW MONTHS LATER
AND TRY TO FIGURE OUT HOW TO
MAINTAIN THE CODE
www.aurorasolutions.io20
WHAT DO WE NEED?
WE NEED BETTER TOOLS TO
AUTOMATE THESE TASKS…
www.aurorasolutions.io23
From server-side app to smart clients and services
www.aurorasolutions.io24
From server-side app to smart clients and services
www.aurorasolutions.io25
From server-side app to smart clients and services
www.aurorasolutions.io26
From server-side app to smart clients and services
www.aurorasolutions.io27
From server-side app to smart clients and services
www.aurorasolutions.io28
From server-side app to smart clients and services
www.aurorasolutions.io29
A GOOD
DEVELOPMEN
T WORKFLOW
→ HELPS TO GET STARTED
www.aurorasolutions.io30
A GOOD
DEVELOPMEN
T WORKFLOW
→ HELPS TO GET STARTED
→ MAINTAINS DEPENDENCIES
www.aurorasolutions.io31
A GOOD
DEVELOPMEN
T WORKFLOW
→ HELPS TO GET STARTED
→ MAINTAINS DEPENDENCIES
→ ENFORCES BEST PRACTICES
www.aurorasolutions.io32
A GOOD
DEVELOPMEN
T WORKFLOW
→ HELPS TO GET STARTED
→ MAINTAINS DEPENDENCIES
→ ENFORCES BEST PRACTICES
→ PREPARES TOOLS
www.aurorasolutions.io33
A GOOD
DEVELOPMEN
T WORKFLOW
→ HELPS TO GET STARTED
→ MAINTAINS DEPENDENCIES
→ ENFORCES BEST PRACTICES
→ PREPARES TOOLS
→ FIGHTS REGRESSIONS
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
www.aurorasolutions.io36
YO
Got life in 2012!
Various contributors (Employees
from Google, Twitter, etc)
history
www.aurorasolutions.io37
YO
- structure
- compilation
- static analysis
- dependencies management
- development tools
- unit testing
scaffolding
www.aurorasolutions.io38
YO
> npm install -g yo
download
“-g” global install
www.aurorasolutions.io39
YO
Various generators:
● Angular
● Ember
● Backbone
generators
And all the other popular frameworks...
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
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.
www.aurorasolutions.io45
BOWERhistory
Package manager for the web
Born in 2012
Created by Twitter and other contributors over time
www.aurorasolutions.io48
BOWERfind available versions
> bower info jquery
www.aurorasolutions.io49
BOWERadd a specific dependency
> bower install jquery#1.10.2 --save
install jquery and save this new dependency
www.aurorasolutions.io51
BOWERadd all your dependencies
> bower install
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.
www.aurorasolutions.io56
GRUNT
❏connect
❏ jshint
❏mocha
❏ imagemin, svgmin, htmlmin
❏compass
❏karma
plugins
www.aurorasolutions.io58
GRUNT
3 parts:
❏Task loading
❏Task configuration
❏Task registration
gruntfile.js structure
www.aurorasolutions.io59
GRUNT
An example: Static code analysis with JSHINT
www.aurorasolutions.io60
GRUNT
HOW TO USE IT?
> grunt
> grunt jshint:all
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.
www.aurorasolutions.io63
FEATURES
● Browser Compatibility
● favicon.ico for browsers
● Web server configs
○ IIS: web.config
○ Apache: .htaccess
○ nginx: nginx.conf
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; }
www.aurorasolutions.io66
BOOTSTRAP
Sleek, intuitive, and powerful mobile first front-
end framework for faster and easier web
development.
www.aurorasolutions.io67
FEATURES
● Scaffolding up to 12 columns
● Nesting columns
● Column ordering
● Grid System
● Responsive design
● many more!
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
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).
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)
www.aurorasolutions.io74
INSTALLING KARMA AND RUNNING TEST
> npm install -g karma
> karma init
> karma start
> karma run //karma runs the tests
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.
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.
www.aurorasolutions.io78
Examples
● It captures screenshot with given width and height also get the
page title
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.”
www.aurorasolutions.io81
FEATURES
● End to End Testing
● Functional Testing
● Automating browsers
● Provide tools to help debugging
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.
www.aurorasolutions.io84
AngularJS Core Concepts
● Modules
● Data Bindings
● Controllers
● Directives
● Services
● Scopes
● Routing
top related