1

An Introduction to

Modern & Emerging Web Technologies

By:- Suresh Patidar

2

Web Technology Trends in 2017And why should you care about it?

3

Agenda

Modern Web DevelopmentNew Web StandardsLanguage EnhancementsJavaScript Frameworks & LibrariesWeb design trends & CSS FrameworksJavaScript at Back-EndHybrid Mobile App FrameworksDeveloper Productivity toolsBeyond Web TechnologiesSome interesting facts

4

Modern Web Development

5

Modern Web Development

Fluid User Experience with no page reloads

Single Page Application(SPA) Architecture

SOA, API and REST based development

Multiple clients, consuming the services

Server side vs Client side views

Client playing vital role by taking more responsibility

High performance apps with low bandwidth utilization

Server Side implementations are becoming a thin layer

6

New Web Standards

7

HTML5

Latest and most enhanced version of HTMLPublished in 2014 by W3C, supported by all modern browsersA candidate for cross-platform mobile applicationsDesigned with low power devices in mindNatively handle multimedia and graphical contentNew semantic elements• <article>• <aside>• <section> ... and many more

New API• Canvas• Offline• Web Storage• Geolocation• Web Socket … and many more

8

CSS3

The latest standard for CSSCompletely backward-compatible with earlier versionsDivided into separate modules• Selectors• Box Model• Backgrounds and Borders• Text Effect• 2D/3D Transformations• Animations• Multiple Column Layout …

9

Language Enhancements

10

TypeScript

Open source programming language developed and maintained by MicrosoftTyped superset of JavaScript and Compiles to plain JavaScriptProvides optional static typing, classes and interfaceEnables IDE to provide richer environment for spotting common errors as you type the codeTypeScript 2.0 released on 22nd Sept 16 with several new features

11

SASS (Syntactically Awesome Style Sheets)

An Extension to CSSAllows you to use things like variables, nested rules, mixins, inline imports, inheritance and moreHelps to keep things organizedAllows you to create style sheets faster

12

JavaScript Frameworks & Libraries

13

Angular 2

The next version of Google’s MV* frameworkReleased on 14th Sept 2016 and Latest version is 2.4.1Huge performance improvementDesigned with keeping mobile oriented architecture in mindDeveloped using TypeScriptComponent based programmingSimple and ExpressiveSeamless upgrade from Angular 1Legacy browser supportGreat support for Animations

14

ReactJS

A JavaScript library for building user interfacesDeveloped and maintained by FacebookKey Features• JSX – JavaScript Syntax Extension• Components – React is all about components• Unidirectional Data Flow and Flux

Advantages• Uses Virtual DOM• Can be used on client side and server side• Components and Data Patterns improve readability which

helps to maintain larger apps• Can be used with other frameworks

15

Web design trends and CSS Framework

16

Web design Trends

The end of traditional web design

Conversational UI

Next generation of responsive design

Minimalistic web design

Fewer stock photos, more authenticity

Long scrolling websites

Typography goes big

17

Bootstrap 4

Bootstrap world’s most popular framework for building responsive, mobile-first sites and applicationsDeveloped and maintained by TwitterBootstrap 4 is in Alpha (5)Not recommended for production use, but highly recommended for learningNew Features• Bootstrap’s source is now Sass• Improved grid system based on “rems”• An Opt-in Flex Box Grid• Cards• Sass variables for customizing• Dropped IE 8 support

18

JavaScript at Back End

19

NodeJS

Released in 2009 by Ryan DahiWritten in C/C++Built on Google Chrome’s V8 JavaScript engineExtremely lightweight and efficientWhat JavaScript has done for the web browser, Node.js is doing for backend serverDoes module loading and Asynchronous IOSingle threaded, One node process per CPUEasily scalable (just create a cluster)Great community and well maintained

20

Hybrid Mobile App Frameworks

21

Ionic 2

complete open-source SDK for hybrid mobile

app development

Enables the creation of cross platform mobile applications

with HTML, CSS and JavaScript(Angular 2)

leverage the skills you already have from developing web

applications

Take advantage of progressive web apps

Target all major mobile platform

Native functionality is easy to implement

22

Meteor

An open-source JavaScript web framework written using

NodeJS

An Isomorphic development ecosystem

Allows rapid prototyping and produces cross-platform

(Android, IOS, Web) code

It is a cohesive development platform

Reactivity – Real time syncing of data is built into meteor at the

core

It has lots of other cool things like a templating system called

Blaze, A database on client called Minimongo and more

23

Developer Productivity Tools

24

Webpack

Webpack is a module bundlerIt splits the dependency tree into chunks loaded on demandIt Keeps initial loading time lowProvide ability to integrate third party libraries as moduleProvide ability to customize nearly every part of the module bundlerBest suited for big projectAngular 2 command line interface (CLI) tool uses webpack

25

Task Runners

Grunt• Linting our JS files• Minifying JS files• Compiling Less• Watching for file change etc.

Gulp• Spinning up a web server• Bundling and minifying libraries and stylesheets• Refreshing your browser when you save a file• Quickly running unit tests• Running code analysis• Less/Sass to CSS compilation• Copying modified files to an output directory etc.

26

Beyond Web Technologies

27

IoT

Refers to ever growing network of physical objects

Extends the internet connectivity beyond traditional devices

Enables the exchange of data that was never possible before

IoT is going to trigger a massive influx of big data.

As more and more devices are being connected and accessible

to the network, we’ll find web developers coming up with

upgraded solutions to help users control and communicate

with their everyday gadgets and equipment

28

Big Data Analytics

A process of examining large data sets to uncover hidden patterns, unknown correlations, market trends, customer preferences and other useful business information.

Apache Spark• A fast and general engine for fast data processing• Run programs up to 100x faster than Hadoop map reduce

in memory• Combine SQL, streaming, and complex analytics• Spark runs on Hadoop, MESOS, standalone, or in the cloud

Scala – Scalable Language• A JVM language that smoothly integrates the features of

object-oriented and functional programming• Java libs may be used directly in Scala code and vice versa• Scala’s design decisions were inspired by criticism of Java’s

shortcomings

29

Some Interesting Facts

30

JavaScript is Every Where…

JavaScript is the most commonly used programming language on earth. Even Back-End developers are more likely to use it than any other language

Source: http://stackoverflow.com/research/developer-survey-2016

31

Most Popular Technologies - 2016

More people use JavaScript than use any other programming language

Source: http://stackoverflow.com/research/developer-survey-2016

32

Trending Tech on Stack OverflowNewer web-development technologies like React, Node.js, and AngularJS are growing in use

Source: http://stackoverflow.com/research/developer-survey-2016

33

Thank You!