View
276
Download
0
Category
Preview:
Citation preview
Front End WorkshopsI. General Overview. Past, present and future of Front
End Web Development
Marc Torrent Vernettamtorrent@visual-engin.com
Infinita dilemmas frontend et backend programmatio
(Neverending contests between Front-end and Back-end programming)
aha! I know! it’s about building things that are not Back-End!
What the hell is Front End Development ???
aha! I know! it’s about building things that are not Back-End!
What the hell is Front End Development ???
very clever ….
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 ???
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 ...
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...
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 !!!
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 !!!
<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:
This developer is strongly convinced of:
And will have a manager position by means of:
And will have a manager position by means of:
historica perfectiorem technicam
(Technolgy historical development)
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
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
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;}
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;}
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
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.
JS Libraries, Welcome!!
● 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)
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
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)
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
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 !!!
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
Modern Frameworks
Model View Controller
Model View ViewModel
Model View ControllerStrongly Opinionated
It’s about Data Binding !!
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
Useful Build Tools
The Future is now The Present
Hybrid Mobile AppsHigh PerformanceCoding Efficiency
Redesigned modern language
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 …
Thanks for your attention!
Leave your questions on the comments section
Recommended