Web applications are software based on web technologies like HTML, JavaScript, and CSS that offer functionality similar to native applications. Languages that compile to JavaScript and CSS can help make codebases more maintainable by adding features like types, object-oriented programming, and variables. Web applications can be distributed both as websites running in browsers and as mobile/desktop apps by using technologies like Node.js and Cordova. Testing and automation of web applications is also possible using frameworks like Jasmine, Selenium, and Appium.

1. Development, deployment and maintenance of today’s web-applications
Modern web-applications
Andrea Tino

2. What are
web-applications?
Software based on web technologies:
HTML, JavaScript and CSS.
Web-sites vs web-applications
Rich Internet Applications offer almost full set of
functionalities when compared to native
applications.
Also dynamic data handling and user management
are common features.
HTML JS CSS

3. Why web-applications?
One word: cross-platform development.
The endless dream of developers!
1998
Java 2 (J2SE)
is released
2002
.NET Framework 1.0 (CLR) is released
2005
Javascript standardization process to ECMAScript 3
proceeds,high community involvement
2011
Adobe purchases Nitobi Software and
rebrands the product into: “PhoneGap”

4. About Javascript
Javascript is an... interesting language, however it is not suitable for
enterprise level development.
A Javascript codebase is difficult to maintain, the
code can be not easy to understand.
Loosely-typed: no semantics, no type checking.
Generally not easy to read.
Prototypes, no OOP.
Simplistic syntax: no generics, no code
grouping constructs (namespaces).
Errors all runtime.

5. Javascript compiled languages
Languages that compile to Javascript can help. Typescript rocks!
Supports types (and generics too).
Full OOP: encapsulation,
inheritance and polymorphism.
Ability to define namespaces and modules.
Complex syntax structures:
async/await, lambdas, module loading.
Errors at compile-time.
TS JS

6. About CSS
CSS is very important for styling your web application, however it is
not suitable for being used in an enterprise level codebase.
CSS is very low level, too much! The final codebase
is hard to maintain and scale.
Selector syntax causes redundancy in the code.
No variables: hardcoded values, duplication.
No code grouping or organization.
No support for code reuse.

7. CSS compiled languages
Languages that compile to CSS. Like SASS, LessCSS and Stylus.
xCSS CSS
Nested selectors for containment selectors.
Optimized generated CSS.
Support for variables, mixins and functions.
Extensible (code own functions).
Better componentization.
Complex syntax constructs
(conditionals, loops).

8. The new Platform
Why do we use languages that compile into Javascript and CSS? Other than those
reasons we just saw, because of one more important concept.
Application level
More semantic makes codebases more
maintainable.
TS
xCSS
xCSS JS
CSS
TS
TS TS
xCSS
TS
TS
xCSS
CSS
JS
JS
CSS
CSS
JS
CSS
JS
JS
xCSS
Assembly level
The Javascript/CSS output is
consiudered today’s web assembly.

9. Running on browsers on desktops
This is the regular distribution/deployment which
has been existing from the very beginning.
RESRESCSSCSSHTMLHTML JSJS
CSCS
CPPCPP
ASPASP
PHPPHP
Server processes back-end files
at every request
HTTP
Web server

10. Running on devices as an app
Thanks to modern technologies and mobile development kits, it
is possible to distribute/deploy a web application as an app.
Our web-assembly files are taken
as input by Cordova which will
process them to be app-deployable
RESRES
CSSCSSHTMLHTML
JSJS
IPAIPA
HTTPAPKAPK
APPXAPPX
Apache Cordova
Cordova will pack the files into an app
package specific for all supported
device platforms

11. Running on desktops as application
If you can rearrange your application to have both
server and client tiers in Javascript, you can
distribute/deploy them both on desktop
computers thanks to Node.js.
Javascript files are
processed by Node
which runs on the
computer
Node process
RESRESCSSCSSHTMLHTML
JSJS
All the other files are
referenced Applications are run on all
platforms supported by Node
which acts as a VM

12. Writing unit-tests
Whether you are developing your web-application in Node or for
browsers, you have the possibility to run unit-tests thanks to different
frameworks available today.
Node process
JSJS
Jasmine
Tests
Executed on frameless browser
JSJS
Source
code

13. Test automation end-to-end
It is important to write automation tests for your application. When you develop
using web-technologies, it is still possible to write automations.
CSCS
CPPCPP
RUBYRUBY
JSJS
RESRES
CSSCSSHTMLHTML
JSJS
Automation tests
code
Selenium
WebDriver
Deployes web application
source files
Appium
Appium uses
Selenium for
testing on devices
Since we are
automating a web
application, it is
possible to run the
same automation
targeting browsers

14. Twitter: @_atino
E-Mail: andrea.tino@microsoft.com
This work is distributed under the Creative
Commons
Attribution-NonCommercial-ShareAlike 4.0
International license.
Cover: Connecting the pieces This work includes artworks
designed by Graphic River.
This work includes artworks
designed by Freepik.com.
Dec 2016
v1.0
Keywords
#agile #scrum
#microsoft
#development-process
#kanban
Presentation info
Duration: 30 mins.
Background: Non technical
Audience: All (6th grade+)
Branched from original
Andrea Tino
Software Development Engineer