workshop intro: frontend general overview
TRANSCRIPT
![Page 1: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/1.jpg)
Front End WorkshopsI. General Overview. Past, present and future of Front
End Web Development
Marc Torrent [email protected]
![Page 2: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/2.jpg)
Infinita dilemmas frontend et backend programmatio
(Neverending contests between Front-end and Back-end programming)
![Page 3: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/3.jpg)
aha! I know! it’s about building things that are not Back-End!
What the hell is Front End Development ???
![Page 4: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/4.jpg)
aha! I know! it’s about building things that are not Back-End!
What the hell is Front End Development ???
very clever ….
![Page 5: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/5.jpg)
Sure! It’s about building the core technology and functionality of a website. It’s about Data Bases and strongly
built Java frameworks that, well, sometimes (but very few times) you could substitute by a much simplistic and naive programming language such
as python and something called Django. Which I’m sure I won’t ever use it because it doesn’t even have typed variables !!!! And then appeared Ruby on Rails that
very few used it and more recently those hippsteric fan boys wanted us to adopt something called nodeJS. ETC, ETC, ETC, ETC, ETC, ETC
Could you please tell me what do you understand for Back End
Development ???
![Page 6: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/6.jpg)
Ok! I got ya!It’s about what designers do with HTML and CSS to have
a nice presentation of the Website.
I understand... but more precisely, Front End
Development is about...
And they also use JavaScript, which is used for cool effects and transitions and also for Form validations.
Come on! Let’s speak seriously! It doesn’t even have Classes, variables are whatever you want ...
![Page 7: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/7.jpg)
HorrendouslyObfuscatedYawnfulOptionYawnfuladjective1.causing or arousing yawns, especially as the result of boredom,tedium, or the like:a yawnful story about her childhood.
Just being polite… I could tell it with
some other words...
![Page 8: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/8.jpg)
Exactly! It’s the layout, it’s the cool designs from PSD to a Web site.
Ok, so Front End is about what you can see and interact in a
website!
But please, don’t think about JS as a serious programming language nor consider Front End
developers as TRUE programmers !!!
![Page 9: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/9.jpg)
Exactly! It’s the layout, it’s the cool designs from PSD to a Web site.
Ok, so Front End is about what you can see and interact in a
website!
But please, don’t think about JS as a serious programming language nor consider Front End
developers as TRUE programmers !!!
![Page 10: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/10.jpg)
<html><head>
<script type=”text/javascript”>perfection = {
nonLeaking: [“one”, “two”, “three”]}, unsense = {
retainer: {}};
while(unsense.retainer){var myFunc = function(MyVar){
if (perfection) MyVar.retainer = perfection.nonLeaking;
};myFunc(unsense);perfection = null;
}</script>
</head><body>
<h1>Awesome!!!</h1></body>
</html>
This developer is proud of his code:
![Page 11: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/11.jpg)
This developer is strongly convinced of:
![Page 12: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/12.jpg)
And will have a manager position by means of:
![Page 13: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/13.jpg)
And will have a manager position by means of:
![Page 14: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/14.jpg)
historica perfectiorem technicam
(Technolgy historical development)
![Page 15: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/15.jpg)
Javascript’s History
1995
JS Birth - Netscape
DHTML
1998
ECMAScript3,DOM Scripting
2000
2004
XHR - AJAX
JQuery
2006
2008
V8
2009
ECMAScript5,nodeJS
2010
HTML5, CSS3
BackboneJS,AngularJS
2011
2012
EmberJS,requireJS
2013
ReactJS,IONIC
WebPack
2014
2015
ECMAScript6,ReactNative
![Page 16: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/16.jpg)
A child is Born● Developed by Brendan Eich - 1995
● Initially called Mocha, then TypeScript
● IE followed it with JScript - 1996
● DHTML techniques for “cool” effects
![Page 17: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/17.jpg)
DHTML vs. DOM ScriptingisIE=document.all?true:false;isNS4=document.layers?true:false;isNS6=document.getElementById?true:false;isOpera=navigator.appName.indexOf('opera')!=-1?true:false;if(isIE && !isOpera){ content=document.all.tags('p')[2].innerText; content=content.replace(/^\w+/,'badger'); document.all.tags('p')[2].innerText=content;}if(isNS6 && !isOpera){ content=document.getElementsByTagName('p')[2].innerHTML; content=content.replace(/^\w+/,'badger'); document.getElementsByTagName('p')[2].innerHTML =content;}if(isNS4 || isOpera){ alert('Your browser is not supported, please download a newer one');}
if(!document.getElementsByTagName){return;}var paragraphs=document.getElementsByTagName('p');if(paragraphs.length>=3){ var content=paragraphs[2].firstChild.nodeValue; content=content.replace(/^\w+/,'badger'); paragraphs[2].firstChild.nodeValue=content;}
![Page 18: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/18.jpg)
DHTML vs. DOM ScriptingisIE=document.all?true:false;isNS4=document.layers?true:false;isNS6=document.getElementById?true:false;isOpera=navigator.appName.indexOf('opera')!=-1?true:false;if(isIE && !isOpera){ content=document.all.tags('p')[2].innerText; content=content.replace(/^\w+/,'badger'); document.all.tags('p')[2].innerText=content;}if(isNS6 && !isOpera){ content=document.getElementsByTagName('p')[2].innerHTML; content=content.replace(/^\w+/,'badger'); document.getElementsByTagName('p')[2].innerHTML =content;}if(isNS4 || isOpera){ alert('Your browser is not supported, please download a newer one');}
if(!document.getElementsByTagName){return;}var paragraphs=document.getElementsByTagName('p');if(paragraphs.length>=3){ var content=paragraphs[2].firstChild.nodeValue; content=content.replace(/^\w+/,'badger'); paragraphs[2].firstChild.nodeValue=content;}
![Page 19: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/19.jpg)
JavaScript, the misunderstood● The name: Java != JavaScript● ECMAScript3 is poorly documented● There were bad books until the 2000’s● Amateur programmers making a bad use of
JavaScriptObject Oriented?● It has objects and constructors, but doesn’t have
Classes● Prototype-oriented inheritance● Building objects by inheritance (is-a) and by
aggregation (has-a) in which JS excels.● Surpases classical inheritance due to its
dynamic nature: new design patterns used
![Page 20: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/20.jpg)
XHR - AJAX● XmlHttpRequest● AJAX: Asynchronous Javascript and XML (or
AJAJ if JSON is returned)● Jesse James Garret - 2004● New paradigm as there’s no need to navigate
in order to change the content of the page and to communicate with the server.
● Security Issues appear: Cross Domain Requests, XSS Attacks
● New perspectives towards RESTful Web apps.
![Page 21: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/21.jpg)
JS Libraries, Welcome!!
![Page 22: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/22.jpg)
● John Resig - 2006● DOM manipulation made easy and with cross
browser support.● Coherent Event handling● Animations made easy● AJAX support with cross browser handling● Extensibility through the Plugin method.● QUnit - First JS Testing Library.● The most important and used JS library in the
world (65% of the top 10 million worldwide websites)
● The basis for other more structured frameworks (dojo, BackboneJS)
![Page 23: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/23.jpg)
JavaScript is Fast● V8 Google compile engine for Webkit and
nodeJS● JS is as fast as C or C++ with V8 engine● JS is 20% faster than Java EE Servlet● JS is 300% faster than Python PyPy● JS is 400% faster than PHP● JS is 3000% faster than LUA● JS is 5000% faster than Ruby● JS is 7000% faster than Python 2.7.6 and
8000% faster than Python 3.4.0 (Both used in Django)
*http://blog.carlesmateo.com/2014/10/13/performance-of-several-languages/#comments*https://dzone.com/articles/performance-comparison-between
![Page 24: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/24.jpg)
NodeJS vs. Java EE
*https://dzone.com/articles/performance-comparison-between
Concurrent Requests Average Response Time (ms) Requests / second
10 23 422
50 119 416
100 243 408
150 363 411
Concurrent Requests Average Response Time (ms) Requests / second
10 19 509
50 109 453
100 196 507
150 294 506
Java EE
NodeJS(20% faster)
![Page 25: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/25.jpg)
But the DOM is VERY SLOW!!● It is memory intensive because it has to keep
all the nodes hierarchy.● A small modification releases a series of
reflows and re-rendering.● It has a very poorly optimized algorithm
![Page 26: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/26.jpg)
HTML5 & CSS3
SEMANTICS
CONNECTIVITY
OFFLINE & STORAGE
MULTIMEDIA
3D GRAPHICS & EFFECTS
PERFORMANCE & INTEGRATION
DEVICE ACCESS
STYLING - CSS3
We have all what we need to build a mobile web app !!!
![Page 27: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/27.jpg)
But the DOM is mainly the SAME!!
But there have been Creative Engineers that have developed new techniques to improve the performance of the DOM by means of ...
That’s TRUE!!
JavaScript Design Patterns
![Page 28: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/28.jpg)
Modern Frameworks
Model View Controller
Model View ViewModel
Model View ControllerStrongly Opinionated
It’s about Data Binding !!
![Page 29: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/29.jpg)
Reactive Programming
● It’s the V of the MVC● Virtual DOM● Stateful Components● One Way Data Flow
Observer Pattern with Event Streams that can be manipulated and transformed with an Scheduler.The data flows in one direction
![Page 30: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/30.jpg)
Useful Build Tools
![Page 31: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/31.jpg)
The Future is now The Present
Hybrid Mobile AppsHigh PerformanceCoding Efficiency
Redesigned modern language
![Page 32: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/32.jpg)
What about that clever developer?
He’s probably anchored at 2004 ...
Let’s open our mind and understand this apparently simple but very complex language.
… and remember …
![Page 33: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/33.jpg)
Thanks for your attention!
Leave your questions on the comments section
![Page 34: Workshop Intro: FrontEnd General Overview](https://reader035.vdocuments.us/reader035/viewer/2022062503/587a16661a28abb4238b540f/html5/thumbnails/34.jpg)