Application development with Web technologies

Cosmin Nicula@Axwayhttp://cosmi.nu

October 1991: “HTML Tags” an informal CERN document listing 18 HTML tags, was first mentioned in public.

https://en.wikipedia.org/wiki/HTMLhttps://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html

May 1995: JavaScript was created

JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.

https://en.wikipedia.org/wiki/JavaScript

“Write once, run anywhere”

“Learn once, write everywhere*”

*Windows, Mac OS X, Linux, ARM, Sun OS, Docker Image, Linux on Power Systems, Linux on System z, AIX on Powert Systems

“Good luck with that”

WebAssembly (WASM)

- the dawn of a new era

http://webassembly.github.io/demo/AngryBots/

WebVR WebVR

https://aframe.io/examples/showcase/anime-UI

Offline support

“Install” to home screen

Bye bye WsoD

Stack Overflow 2016 Survey

Stack Overflow 2016 Survey

The survey was conducted on 56,033 coders in 173

countries.

“Surveys aren’t perfect. While our large sample size helps

offset some biases, it’s still biased against devs who don't

speak English, or who don't like taking English-language

surveys”.

Star Wars vs. Star Trek

Developer Occupations

Education

Most Popular Technologies

Most Popular Technologies per Dev Type

Trending Tech on Stack Overflow

Devs Love to Learn

Challenges At Work

Companies

Programming languages for the Open Web

Platform cross-platform development

HTML

• Handlebars

• Jade

• Mustache

…

CSS

• Sass

• Less

JavaScript

• TypeScript

• ES6 / ES7

• JSX

• CoffeeScript

...

The building blocks of an application

• Data flow: MV* / Flux

• Router

• A11y

• I18n

• Forms & validation

• Error handling

• Components

• Theming

• ...

MVC architecture with AngularJS 1

Types of applications

Web UI applications

Technologies: HTML / CSS / JavaScript

The bundles can target browsers and WebViews on desktop, mobile and

other platforms

Custom look & feel; sluggish performance on less powerful devices

Native UI applications (mobile, desktop, tv, gaming console etc.)

Technologies: JavaScript + XML + SDKs

The bundle contains JavaScript which can access platform-specific

features

Platform-specific look & feel; near-native performance

Hard to distinguish from a native app written with Swift / Java / .NET

Native UI Web UI

React Native

NativeScript

Support matrix for cross-platform development tools

Cordova Architecture

The resources are painfully fragmented and it requires

skills and experience to choose a good stack.

The ecosystem is overwhelming for beginners

Some history first: the golden age!

The modern age!

As if you haven’t had enough...

Knockout

Lodash Kendo UI

Backbone.js

Flux

Marionette.js

Aurelia

Vue.js

Nuclear.js

RxJS

Om

UNDERSCORE.JS

Trends: requests and transfer size

NOV 2010 - MAR 2016

Source: HTTP Archive - top 1000 URLs

Big JavaScript!

Source: an idiotic prediction

0.2 PB

0.4 PB

0.6 PB

0.8 PB

1 Petabyte!

2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029

Angular 1, React, jQuery

Ember, Polymer, Angular 2

Choosing technologies

Ecosystem

Commercially backed

Learning curve

Interoperability

Modularity

Commercial adoption

Performance

Security

...

Some important factors when choosing technologies:

Web Components

Web Components is a technology pushed by Google that

allows the creation of reusable widgets or components in

web documents and web applications.

This technology will be supported natively by the browsers

in the future.

Google https://elements.polymer-project.org/browse

Microsoft http://thewebrocks.com/demos/x-tag/demo.html

IBM http://ibm-js.github.io/delite/

Vaadin https://vaadin.com/elements

Tools

Everything you need to setup your project

Task runners

Test tools

Module bundlers

Linting

Documentation ESDoc

Error monitoring

Generators

Code coverage Istanbul

Compilers

Type safety

CSS preprocessors

Popular visual design languages:

Bootstrap (Twitter) - http://goo.gl/03ur8

Material (Google) - https://goo.gl/RlCfEf

Lightning Design System (Salesforce) - https://goo.gl/iWdHSe

Metro (Microsoft) - https://goo.gl/QMmFv6

Foundation (Zurb) - http://goo.gl/71xgUi

There’s also CSS!

Visual design language Available implementations

Bootstrap

Material

Kendo UI

Visual design implementations matrix

Enterprises have their own visual identities which

translates to UX prototypes and ultimately become

something similar to the ones previously mentioned.

CSS in the enterprise world

Let’s see some action!

Web UI running in browser on Mac

OS X

- Polymer, React

Web UI running in Cordova on iOS

-

React

Web UI running in Cordova on

Android device

Web UI running in Electron on

Windows and Mac OS X

-

React

Native UI running on iOS simulator

- React Native

Native UI running on iOS simulator

- NativeScript

Cloud IDE with hosting capabilities

What it takes

Learn

OOP & functional programming, design patterns, data structures, algorithms.

Practice

Software development is more about strong problem solving skills than about coding in a specific language.

Also, don't get stuck in a single framework or language because things are changing. Fast.

Thank you!