Introduction to Modern and Emerging Web Technologies
-
Upload
suresh-patidar -
Category
Software
-
view
242 -
download
3
Transcript of Introduction to Modern and Emerging Web Technologies
![Page 1: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/1.jpg)
1
An Introduction to
Modern & Emerging Web Technologies
By:- Suresh Patidar
![Page 2: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/2.jpg)
2
Web Technology Trends in 2017And why should you care about it?
![Page 3: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/4.jpg)
4
Modern Web Development
![Page 5: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/6.jpg)
6
New Web Standards
![Page 7: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/8.jpg)
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 …
![Page 9: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/9.jpg)
9
Language Enhancements
![Page 10: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/12.jpg)
12
JavaScript Frameworks & Libraries
![Page 13: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/14.jpg)
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
![Page 15: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/15.jpg)
15
Web design trends and CSS Framework
![Page 16: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/16.jpg)
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
![Page 17: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/17.jpg)
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
![Page 18: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/18.jpg)
18
JavaScript at Back End
![Page 19: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/20.jpg)
20
Hybrid Mobile App Frameworks
![Page 21: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/23.jpg)
23
Developer Productivity Tools
![Page 24: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/24.jpg)
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
![Page 25: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/25.jpg)
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.
![Page 26: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/26.jpg)
26
Beyond Web Technologies
![Page 27: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/27.jpg)
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
![Page 28: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/28.jpg)
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
![Page 29: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/29.jpg)
29
Some Interesting Facts
![Page 30: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/30.jpg)
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
![Page 31: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/31.jpg)
31
Most Popular Technologies - 2016
More people use JavaScript than use any other programming language
Source: http://stackoverflow.com/research/developer-survey-2016
![Page 32: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/32.jpg)
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
![Page 33: Introduction to Modern and Emerging Web Technologies](https://reader034.fdocuments.in/reader034/viewer/2022051404/589e04db1a28ab67278b490b/html5/thumbnails/33.jpg)
33
Thank You!