Development, deployment and maintenance of today’s web-applications

Modern web-applicationsAndrea Tino

What are web-applications?Software based on web technologies: HTML, JavaScript and CSS.

Web-sites vs web-applications Rich Internet Applications o�er almost full set of functionalities when compared to native applications. Also dynamic data handling and user management are common features.

HTML JS CSS

Why web-applications?One word: cross-platform development.

�e endless dream of developers!

1998Java 2 (J2SE) is released

2002.NET Framework 1.0 (CLR) is released

2005Javascript standardization process to ECMAScript 3 proceeds,high community involvement

2011Adobe purchases Nitobi Software and

rebrands the product into: “PhoneGap”

About JavascriptJavascript is an... interesting language, however it is not suitable for enterprise level development.

A Javascript codebase is di�cult 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.

Javascript compiled languagesLanguages that compile to Javascript can help. Typescript rocks!

Supports types (and generics too).

Full OOP: encapsulation, inheritance and polymorphism.

Ability to de�ne namespaces and modules.

Complex syntax structures: async/await, lambdas, module loading.

Errors at compile-time.

TS JS

About CSSCSS 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! �e �nal 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.

CSS compiled languagesLanguages 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).

The new PlatformWhy do we use languages that compile into Javascript and CSS? Other than those reasons we just saw, because of one more important concept.

Application levelMore semantic makes codebases more maintainable.

TS

xCSS

xCSS

JSCSS

TS

TSTS

xCSS

TS

TS

xCSS

CSSJS

JS

CSS CSS

JS

CSS

JS

JSxCSS

Assembly level�e Javascript/CSS output is consiudered today’s web assembly.

Running on browsers on desktops�is is the regular distribution/deployment which has been existing from the very beginning.

RESRESCSSCSSHTMLHTML JSJS

CSCS

CPPCPP

ASPASP

PHPPHP

Server processes back-end �les at every request

HTTP

Web server

Running on devices as an app�anks to modern technologies and mobile development kits, it is possible to distribute/deploy a web application as an app.

Our web-assembly �les 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 �les into an app package speci�c for all supported

device pla�orms

Running on desktops as applicationIf 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 �les are processed by Node which runs on the computer

Node processRESRESCSSCSSHTMLHTML

JSJS

All the other �les are referenced Applica�ons are run on all

pla�orms supported by Node which acts as a VM

Writing unit-testsWhether you are developing your web-application in Node or for browsers, you have the possibility to run unit-tests thanks to di�erent frameworks available today.

Node processJSJS

JasmineTests

Executed on �ameless browser

JSJS

Source code

Test automation end-to-endIt 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

JSJSRESRES

CSSCSSHTMLHTML

JSJS

Automa�on tests code

Selenium WebDriver

Deployes web applica�on source �les

Appium

Appium uses Selenium for tes�ng on devices

Since we are automa�ng a web applica�on, it is

possible to run the same automa�on

targe�ng browsers

Twitter: @_atinoE-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 2016v1.0

Keywords#agile #scrum #microsoft #development-process #kanban

Presentation infoDuration: 30 mins.Background: Non technicalAudience: All (6th grade+)Branched from original

Andrea TinoSoftware Development Engineer