Introduction to Modern and Emerging Web Technologies
Download as PPTX, PDF4 likes2,467 views
The document discusses modern and emerging web technologies, highlighting trends from 2017, including advancements in web development, new web standards like HTML5 and CSS3, and significant programming languages and frameworks such as TypeScript, Angular 2, and ReactJS. It also covers hybrid mobile app frameworks like Ionic and Meteor, developer productivity tools such as Webpack and Grunt, and the impact of the Internet of Things and big data analytics on web development. The document emphasizes the importance of JavaScript, noting its dominance in contemporary programming and web technologies.
Introduction to Modern and Emerging Web Technologies
- 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
- 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
- 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
- 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
- 33. 33 Thank You!
Editor's Notes
- #3: 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.
- #6: 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.
- #8: 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
- #12: Mixins- Create reusable chunk of CSS to avoid writing repetitive code Inline Import – Allow to create partials and use them using imports
- #14: 5 time faster then angular 1
- #15: Immutability – The key for react framework to identify changes. Flux – A design pattern for unidirectional data flow.
- #17: 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.
- #18: 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
- #21: Hybrid mobile application in “Web View”
- #22: Progressive Web apps - A new way to deliver amazing user experiences on the web. Native functionality – Using Cordova Plugins available for different platforms
- #23: 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
- #28: 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
- #29: Analysis of crime records and help predict where crimes are likely to occur and help cops to take preventive actions
- #33: The average developer regularly uses between 4 and 5 major programming languages, frameworks and technologies. The most common 2-technology combination is JavaScript & SQL