Advertisement
Workshop Intro: FrontEnd General Overview
Feb. 16, 2016•0 likes•666 views
0 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Software
Workshop Overview General del ecosistema de Javascript y de los Frameworks actuales. ¿Hacia dónde vamos? ReactJS - Flux Pattern - ReactNative. RactiveJS, VueJS. Presentado por Ing. Marc Torrent
Visual EngineeringFollow
Visual EngineeringAdvertisement
Advertisement
Advertisement
Recommended
Workshop 16: EmberJS Parte IVisual Engineering
Workshop 9: BackboneJS y patrones MVCVisual Engineering
Workshop 21: React RouterVisual Engineering
Workshop 24: React Native IntroductionVisual Engineering
Workshop 4: NodeJS. Express Framework & MongoDB.Visual Engineering
Workshop 12: AngularJS Parte IVisual Engineering
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 !!!
- 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 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; content=content.replace(/^w+/,'badger'); 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; content=content.replace(/^w+/,'badger'); paragraphs[2].firstChild.nodeValue=content; }
- 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; content=content.replace(/^w+/,'badger'); 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; 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 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.
- 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 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
- Useful Build Tools
- 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
Advertisement