Workshop Intro: FrontEnd General Overview

Front End Workshops
I. General Overview. Past, present
and future of Front End Web
Development
Marc Torrent Vernetta
mtorrent@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 ...

Horrendously
Obfuscated
Yawnful
Option
Yawnful
adjective
1.
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 !!!

<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:

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 Scripting
isIE=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;
document.getElementsByTagName('p')[2].innerHT
ML =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;
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 JavaScript
Object 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.

● 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 Controller
Strongly 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

The Future is now The Present
Hybrid Mobile Apps
High Performance
Coding 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

Workshop Intro: FrontEnd General Overview

Workshop Intro: FrontEnd General Overview

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Workshop Intro: FrontEnd General Overview

Similaire à Workshop Intro: FrontEnd General Overview (20)

Plus de Visual Engineering

Plus de Visual Engineering (20)

Dernier

Dernier (20)

Workshop Intro: FrontEnd General Overview