Web in 2018
Ahmed Murtaza
Sr. Front End Developer
Ovrlod
ahmedgmurtaza
slides.com/ahmedmurtaza
codepen.io/ahmedgmurtaza
https://medium.com/@ahmedgmurtaza
Evolution
of Web
Single Page Apps
</>
HTML5
AJAX
Tableless web
Flash
HTML
JS
CSS
Building Blocks
HTML
Semantic Markup
Accessibility
SEO
Semantic Markup
CSS
CSS Preprocessors
JavaScript
Interactivity
Animations
Graphics
JavaScript is not
React
A JavaScript library for building User Interfaces
@ahmedgmurtaza
Who else is using it?
https://github.com/facebook/react/wiki/Sites-Using-React
770 renowned brands listed including
@ahmedgmurtaza
<script src=".../react.development.js"></script>
<script src=".../react-dom.development.js"></script>
<script src=".../babel.js"></script>
dependencies
@ahmedgmurtaza
Vanilla JS
@ahmedgmurtaza
React.js
@ahmedgmurtaza
Introducing JSX
(from React team)
@ahmedgmurtaza
This is neither String nor HTML
Difference between HTML & JSX
https://reactjs.org/docs/dom-elements.html
@ahmedgmurtaza
http://Babeljs.io
Uses to transpile JSX into browser compatible javascript code.
<script src=".../babel.js"></script>
@ahmedgmurtaza
User-Defined Components Must Be Capitalized
Capital case => component
Small case => HTML tag
@ahmedgmurtaza
Components
Component is a small and isolated
part of an interface
@ahmedgmurtaza
Example
@ahmedgmurtaza
Component Lifecycle
@ahmedgmurtaza
Thank You
ahmedgmurtaza
ahmedgmurtaza
slides.com/ahmedmurtaza
codepen.io/ahmedgmurtaza
https://medium.com/@ahmedgmurtaza
Web in 2018
By Ahmed Murtaza
Web in 2018
Guest session at IBA Karachi on 'Web in 2018' covering Front end technologies and some milestones of Ajax, Single page applications.
