Here is the blog: http://www.aurorasolutions.io/architecture-workflow-of-modern-web-apps/
In the IT industry the biggest problem we regularly face is the abundance of choice. We have tons of frameworks, languages, tools, platforms, etc. Although for competition purposes; multiple choices are ultimately very good but we usually find ourselves in paralysis when we have to choose among them for our next project.
People usually still consider that (frontend) of web applications are created by mixing together HTML, CSS & JavaScript without giving any thoughts about the frontend architecture, workflow and testing; but things have definitely changed now since last couple of years and in this presentation I try to explain that how JavaScript and it’s related stuff has become first class citizen and how the new workflow looks like. And I will also explain that how the architecture of modern web applications is migrating from thick server-side applications to smart clients and services on their journey North to pure Microservices.
Here is the list of different tools and frameworks that have been discussed in this presentation:
* Yeoman: (http://yeoman.io/) Yeoman is the web’s scaffolding tool for modern webapps. Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.
* Bower: (http://bower.io/) Bower is used for dependency management, so that you no longer have to manually download and manage your scripts. Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.
* Grunt: (http://gruntjs.com/) Grunt is a task-based command line build tool for JavaScript projects. When you work on large projects you have couple of things that you do regularly and you would like them to be automated; Grunt is the tool to solve that problem!
* HTML5 Boilerplate: (https://html5boilerplate.com/) HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
* Twitter Bootstrap: (http://getbootstrap.com/2.3.2/) Sleek, intuitive, and powerful front-end framework for faster and easier web development.
* Jasmine: (https://github.com/jasmine/jasmine) Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
* Karma: (https://github.com/karma-runner/karma/) A simple tool that allows you to execute JavaScript code in multiple real browsers.
* PhantomJS: (https://github.com/ariya/phantomjs/) PhantomJS is a headless WebKit scriptable with JavaScript.
* Protractor: (https://github.com/angular/protractor) Protractor is an end-to-end test framework for AngularJS applications.
3. 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
6. 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...
8. 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
10. 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
11. 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
12. 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
13. 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
40. www.aurorasolutions.io
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. www.aurorasolutions.io
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.
62. www.aurorasolutions.io
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.
64. www.aurorasolutions.io
64
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; }
70. www.aurorasolutions.io
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. www.aurorasolutions.io
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. www.aurorasolutions.io
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)
76. www.aurorasolutions.io
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. www.aurorasolutions.io
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.
80. www.aurorasolutions.io
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.”
83. www.aurorasolutions.io
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.
This architecture combines the advantages of traditional Web applications - dynamic behavior, networking, and easy access from the browser - with those of classic desktop client applications: Offline availability, fast response time and speed.
How many of you are backend developers?
How many of you are frontend developers?
How many of you are full stack developers?
How many of you have never used AngularJS?
How many of you have been using it for more than a year?
A problem we regularly face in this industry is an abundance of choice. We have a plethora of tools, frameworks, languages, abstractions and platforms. Choice is ultimately good for competition and innovation, however when faced with too many choices, we can feel paralysis. Rather than making a choice we feel frozen and alone with the indecision of having too many options in front of us. This isn’t necessarily an industry problem — it’s a human problem.
People often consider that creating a web application is done by creating a bunch of HTML, Javascript and CSS files together in a text editor and uploading them on the web.
Well, things have changed and in this presentation, you will see how the workflow used to deliver web applications has evolved over the past few years!
We will start by seeing how you can use Yeoman and its generators to kickstart your project. Then you will see how Bower let you manage the dependencies of your project. Downloading the JavaScript and CSS frameworks that you are using for you. After that we will have a look at Chrome Devtools in order to debug and edit our application. We will also see how to use remote debugging to inspect a web application running on a phone or a tablet.
Finally we will see how you can set up your whole continuous integration workflow with Grunt. Compilation, static code analysis, unit tests, integration tests, minification, code coverage, you name it.
If you work with JavaScript, it’s highly probable that you already know of at least some of these tools, even if you’re new to Angular.
In the beginning...
Let there be CGI
YEOMAN THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS
BOWER Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.
KILLER PACKAGE MANAGEMENT Need a dependency? It's just a keystroke away. It allows you to easily search for new packages via the command-line (e.g. `bower search jquery`), install them and keep them updated without needing to open your browser.
BOWER.JSON { "name":"myproject", "version":"0.1.0", "dependencies":{ "jquery":"~1.11.0", "bootstrap-sass-official":"~3.1.0" }, "devDependencies":{ "mocha":"1.14.0" } }
INSTALL NEW PACKAGE
bower install underscore
bower install jqueryui#1.10.4
bower search calendar
BOWER Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.
KILLER PACKAGE MANAGEMENT Need a dependency? It's just a keystroke away. It allows you to easily search for new packages via the command-line (e.g. `bower search jquery`), install them and keep them updated without needing to open your browser.
BOWER.JSON { "name":"myproject", "version":"0.1.0", "dependencies":{ "jquery":"~1.11.0", "bootstrap-sass-official":"~3.1.0" }, "devDependencies":{ "mocha":"1.14.0" } }
INSTALL NEW PACKAGE
bower install underscore
bower install jqueryui#1.10.4
bower search calendar
GRUNT Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.
SAMPLE TASKS test build serve
PLUGINS connect jshint mocha imagemin, svgmin, htmlmin compass karma
What is Bootstrap?
2. Bootstrap is a free collection of tools for creating websites and web applications lBootstrap contains HTML and CSS-based design templates for text, forms, buttons, navigation and other components lBootstrap also contains optional JavaScript extensions lBootstrap is open source and available on GitHub
3. Bootstrap History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.
Bootstrap was released as an open source product in August 2011 on GitHub.
4. Why Use Bootstrap?
Mobile-first approach: Since Bootstrap 3, the framework consists of mobile-first styles throughout the entire library
Browser support: Bootstrap is supported by all popular browsers
5. Responsive web design: Bootstrap responsive CSS adjusts to Desktops, Tablets, and Mobile phones
Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap
6. What Does Bootstrap Include?
Scaffolding: Contains layout, grid system, fluid grid system, and responsive design
Base CSS: Contains classes for typography, tables, forms, buttons, images, and more
Components: Contains reusable components: icons, dropdowns, navbars, breadcrumbs, alerts, and more
7. JavaScript Plugins: Contains over a dozen custom jQuery plugins. You can include them all, or one by one Customizable Components : Customize Bootstrap's components, LESS variables, and jQuery plugins to create your own version
http://www.slideshare.net/Hazems/automated-jasmine-tests-for-java-script
http://www.slideshare.net/cebartling/javascript-tdd-with-jasmine-and-karma
Introducing Jasmine
• Testing framework
• Suites possess a hierarchical structure
• Tests as specifications
• Matchers, both built-in and custom
• Spies, a test double pattern
Jasmine suite describe("A specification suite", function() { … });
• Group specifications together using nested describe function blocks.
• Also useful for delineating context-specific specifications.
Jasmine specification describe("A specification suite", function() { it(“contains spec with an expectation", function() { expect(view.tagName).toBe(‘tr’); }); });
• Specifications are expressed with the it function.
• The description should read well in the report.
• Expectations are expressed with the expect function.
Jasmine matchers
• not • toBe • toEqual • toMatch • toBeDefined • toBeUndefined • toBeNull • toBeTruthy • toBeFalsy • toContain • toBeLessThan • toBeGreaterThan • toBeCloseTo • toThrow
http://www.slideshare.net/Hazems/automated-jasmine-tests-for-java-script
http://www.slideshare.net/cebartling/javascript-tdd-with-jasmine-and-karma
Introducing Jasmine
• Testing framework
• Suites possess a hierarchical structure
• Tests as specifications
• Matchers, both built-in and custom
• Spies, a test double pattern
Jasmine suite describe("A specification suite", function() { … });
• Group specifications together using nested describe function blocks.
• Also useful for delineating context-specific specifications.
Jasmine specification describe("A specification suite", function() { it(“contains spec with an expectation", function() { expect(view.tagName).toBe(‘tr’); }); });
• Specifications are expressed with the it function.
• The description should read well in the report.
• Expectations are expressed with the expect function.
Jasmine matchers
• not • toBe • toEqual • toMatch • toBeDefined • toBeUndefined • toBeNull • toBeTruthy • toBeFalsy • toContain • toBeLessThan • toBeGreaterThan • toBeCloseTo • toThrow
http://www.slideshare.net/Hazems/automated-jasmine-tests-for-java-script
http://www.slideshare.net/cebartling/javascript-tdd-with-jasmine-and-karma
Introducing Jasmine
• Testing framework
• Suites possess a hierarchical structure
• Tests as specifications
• Matchers, both built-in and custom
• Spies, a test double pattern
Jasmine suite describe("A specification suite", function() { … });
• Group specifications together using nested describe function blocks.
• Also useful for delineating context-specific specifications.
Jasmine specification describe("A specification suite", function() { it(“contains spec with an expectation", function() { expect(view.tagName).toBe(‘tr’); }); });
• Specifications are expressed with the it function.
• The description should read well in the report.
• Expectations are expressed with the expect function.
Jasmine matchers
• not • toBe • toEqual • toMatch • toBeDefined • toBeUndefined • toBeNull • toBeTruthy • toBeFalsy • toContain • toBeLessThan • toBeGreaterThan • toBeCloseTo • toThrow
Spectacular Test Runner for Javascript
AngularJS...
is not a JavaScript library (e.g jQuery)
is not a Platform (e.g .Net, Java) or a Language (e.g C#)
is not a Plugin or a browser extension
doesn’t abstract away HTML, CSS, or JavaScript
doesn’t require jQuery or inheritance from proprietary types
doesn’t use one-way data binding
doesn’t require boilerplate code is not that complicated
http://yeoman.io/learning/
JavaScript has “Yet another framework syndrome” (how many solutions do we have for MVC, template rendering or data-binding?), Perl has “There’s more than one way to do it” (TIMTOWTDI), and Python has “There should be one obvious way to do it”, The Zen of Python.