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!
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
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
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 …
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
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
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
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
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
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.
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
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
Lot of new releases and enhancements are seen in multiple technologies in last year comprising of multiple languages like python, java, rubby, JavaScript etc.
The key driving force behind all of them was to make development easy, efficient and provide best in class performance from the underlying technology
Other areas like IoT, Mobility, Big Data, Containers etc. had also become more popular the trend is going to continue in 2017 as well.
End of traditional request/response model where each user event used to send a post back to the server and whole page reloaded in the response to that request.
Browser, Mobile, Tablet, POS device and other hand held devices consuming services from same back end
With web standardization and widely adaptation of HTML5 and CSS3 client are now geared up to take the complete responsibility of visualization aspect of the application.
Backend are just thin layer serving the data and supporting business logic. This has optimized the bandwidth utilization to a great extent.
HTML is technically not a programming language but a markup language to create web UI.
Semantic elements = elements with a meaning, A semantic element clearly describes its meaning to both the browser and the developer
This made it possible for search engines to identify the correct web page content
Geolocation – Get user location. Works precisely with devices supporting GPS.
Canvas – Draw graphics on the fly using javascript
Offline – Application cache to make offline version of web app by creating cache manifest file
Mixins- Create reusable chunk of CSS to avoid writing repetitive code
Inline Import – Allow to create partials and use them using imports
5 time faster then angular 1
Immutability – The key for react framework to identify changes.
Flux – A design pattern for unidirectional data flow.
Shifting UI Design to Experience Design
We saw huge popularity in chatting and social media applications. Same is going to continue in current year. The once interesting observation is the now UI are becoming conversational. You have seen a small blog with lots of comments. That’s about conversational UI.
Web apps are moving toward card based layout for their home page and providing path to explore more details from there.
The days are now gone when you see the same picture of smiling person on “Our Team” page of all the website.
Bootstrap team is working on Alpha (6). After that it may go in beta phase. There is no official release date given but it is expected to be released in March 17
Hybrid mobile application in “Web View”
Progressive Web apps - A new way to deliver amazing user experiences on the web.
Native functionality – Using Cordova Plugins available for different platforms
Isomorphic – Single language for both front end and backend
Cohesive - a collection of libraries and packages that are bound together in a tidy way to make web development easier.
DDP (Distributed Data Protocol) - A protocol for sending data over websockets. Dubbed 'REST for websockets'.
EJSON - An extension of JSON to support serializing more data types like Dates and Binary.
Blaze - A reactive library built to marry Tracker & Spacebars up to create live updating user interfaces. Similar to Angular, Backbone, react
Minimongo - A client side mongo library that synchronizes data over DDP and allows the client to reactively consume mongo data
how easy it will be for you to start your day if your alarm clock is not only able to wake you up but also able to communicate with your brewer to inform it that you are awake at the same time notifies your geezer to start water heating. Or you wearable wrist health band keeps track of your vitals to inform you when you are most productive during the day
Analysis of crime records and help predict where crimes are likely to occur and help cops to take preventive actions
The average developer regularly uses between 4 and 5 major programming languages, frameworks and technologies. The most common 2-technology combination is JavaScript & SQL