introduction to modern and emerging web technologies
TRANSCRIPT
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!