Download - Modern web applications
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: [email protected]
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