2017 is here and we are already a couple of days in! A lot happened in the software development world in 2016. There were new releases of popular programming languages, new versions of important frameworks, and new tools. Let’s discuss some of the most important releases, and find out which skills you can learn that would be a great investment for your time in 2017!

1. 1
An Introduction to
Modern & Emerging Web Technologies
By:- Suresh Patidar

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

3. 3
Agenda
Modern Web Development
New Web Standards
Language Enhancements
JavaScript Frameworks & Libraries
Web design trends & CSS Frameworks
JavaScript at Back-End
Hybrid Mobile App Frameworks
Developer Productivity tools
Beyond Web Technologies
Some interesting facts

4. 4
Modern Web Development

5. 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. 6
New Web Standards

7. 7
HTML5
Latest and most enhanced version of HTML
Published in 2014 by W3C, supported by all modern browsers
A candidate for cross-platform mobile applications
Designed with low power devices in mind
Natively handle multimedia and graphical content
New semantic elements
• <article>
• <aside>
• <section> ... and many more
New API
• Canvas
• Offline
• Web Storage
• Geolocation
• Web Socket … and many more

8. 8
CSS3
The latest standard for CSS
Completely backward-compatible with earlier versions
Divided into separate modules
• Selectors
• Box Model
• Backgrounds and Borders
• Text Effect
• 2D/3D Transformations
• Animations
• Multiple Column Layout …

9. 9
Language Enhancements

10. 10
TypeScript
Open source programming language developed and maintained by
Microsoft
Typed superset of JavaScript and Compiles to plain JavaScript
Provides optional static typing, classes and interface
Enables IDE to provide richer environment for spotting common
errors as you type the code
TypeScript 2.0 released on 22nd Sept 16 with several new features

11. 11
SASS (Syntactically Awesome Style Sheets)
An Extension to CSS
Allows you to use things like variables, nested rules,
mixins, inline imports, inheritance and more
Helps to keep things organized
Allows you to create style sheets faster

12. 12
JavaScript Frameworks & Libraries

13. 13
Angular 2
The next version of Google’s MV* framework
Released on 14th Sept 2016 and Latest version is 2.4.1
Huge performance improvement
Designed with keeping mobile oriented architecture in mind
Developed using TypeScript
Component based programming
Simple and Expressive
Seamless upgrade from Angular 1
Legacy browser support
Great support for Animations

14. 14
ReactJS
A JavaScript library for building user interfaces
Developed and maintained by Facebook
Key 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. 15
Web design trends and CSS Framework

16. 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. 17
Bootstrap 4
Bootstrap world’s most popular framework for building
responsive, mobile-first sites and applications
Developed and maintained by Twitter
Bootstrap 4 is in Alpha (5)
Not recommended for production use, but highly recommended
for learning
New 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. 18
JavaScript at Back End

19. 19
NodeJS
Released in 2009 by Ryan Dahi
Written in C/C++
Built on Google Chrome’s V8 JavaScript engine
Extremely lightweight and efficient
What JavaScript has done for the web browser,
Node.js is doing for backend server
Does module loading and Asynchronous IO
Single threaded, One node process per CPU
Easily scalable (just create a cluster)
Great community and well maintained

20. 20
Hybrid Mobile App Frameworks

21. 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. 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. 23
Developer Productivity Tools

24. 24
Webpack
Webpack is a module bundler
It splits the dependency tree into chunks loaded on demand
It Keeps initial loading time low
Provide ability to integrate third party libraries as module
Provide ability to customize nearly every part of the module bundler
Best suited for big project
Angular 2 command line interface (CLI) tool uses webpack

25. 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. 26
Beyond Web Technologies

27. 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. 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. 29
Some Interesting Facts

30. 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. 31
Most Popular Technologies - 2016
More people use JavaScript than use any other programming language
Source: http://stackoverflow.com/research/developer-survey-2016

32. 32
Trending Tech on Stack Overflow
Newer web-development technologies like React, Node.js, and AngularJS
are growing in use
Source: http://stackoverflow.com/research/developer-survey-2016

33. 33
Thank You!