AI introduction to modern web technologies.pptx

AmrutaGourgonda 13 views 29 slides Mar 02, 2025
Slide 1
Slide 1 of 29
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29

About This Presentation

Good


Slide Content

An Introductions to Modern Web Technologies By Amarsingh Rathod

Web Technology Trends in 2022 Why should be care about it.

Agenda Modern web development New web standard Java script frameworks and libraries Web design trends and CSS frameworks JavaScript at back end Hybrid mobile app framework Developer productivity Some interesting facts

Modern web development

Modern web development Fluid user experience with no page reloads. Single page applications(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.

New web standards

HTML 5 Latest and most enhanced versio of HTML Published in 2014 by W3c,supported by all modern browsers A candidate for crosss -platform mobile apllications . Designed with low power devices in mind Natively handle multiedia and graphical content New semantics elements <article> <aside> <section>… and many more New API Canvas Offline Web storage Geolocation Web sockets and many more

css3 The latest standards for CSS Completely backward- compatibale with earlier version Divided into sepreate modules Selectors Box model Background and borders Text effect 2D/3D Transformations Animations Multiple column layout

Java script frameworks and libraries

Angular 2 The next version of Google’s MV* framework Relaesed on 14 th sept 2016 and latest version is 2.4.1 Huge performance improvement Designed with keeping mobileoriented architecture in mind Developed using typescript Component based programming Simple and expressive Seamless upgrade from angular 1 Legacy browser support Great support for Animations

ReactJs A JavaScript library for building user interface. Developed and maintain by facebook Key Features. JSX- Javascript syntax extension. Components-React is all about the components Unidirectional data flow and flux Advantages Use virtual DOM Can be used on client side and server side Componets and data patterns are improved readability which helps to maintain large apps Can be used with other framework

Web design trends and css framework

Access the ultimate library with scribd 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.

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 & support

JAVASCRIPT AT BACK END

REALESED 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 user. Does module loading and asynchronous IO Single threaded ,one node process per CPU Easily scalable( just create a cluster ) Great community and well maintained.

Hybrid mobile app frameworks

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.

metror An Open-source Javascripts web framework written using Nodels . An Isomorphic development ecosystem. Allows rapid prototyping and produces cross-platform ( android,IOS , web)code Its is a cohensive development Platform Reactivity-real time syncing of data is built into metror at the core. It has lots of other cool things like a templating system called blaze. A database on client called minimango .

Developer Prodcutivity tools

webPAck Webpack is a module Bundler It splits the dependancy tree into chunks loaded on demand Its keps initial loading time low Provide ability to integrate third libraries as module Provide ability to customise nearly every part of the module bunlder Best suited for big Project Angular 2 command line interface (CLI) tool uses webpack .

Task runner 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 style sheets Refreshing your browser when you save a file Quickly running unit tests Running code analysis Less/ Saas to CSS compilation Copying modified files to an output directory.

Beyond web technologies

IOT Refer to ever growing network of physical objects Extends the internet connectivity beyond traditional device. 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 t o the network, we’ll find web developers coming up with upgraded solutions to help users control and communicate with their everyday gadgets and equipment.

Big data anaytics A Process of examining large data sets to uncover hidden patters, unknown correlation, market trends, customer preferences and other useful business information. Apache sparks 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 Sparks 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 labs may be used directly in scala code and vice versa Scala’s design decisions were inspired by criticism of java’s shortcomings.

Some interesting facts

Javascript is everywhere JavaScript is the most commonly used programming languages on the earth. Even all the professional developers are more likely to use it than any other programming language.

Trending tech on stack overflow Newer web development technologies like React,Node.js and angular.js are growing in use.

Thank you
Tags