Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Globant Week Cali - Entendiendo el desarrollo Front-end del mundo moderno.

57 views

Published on

Todos los días sale un nuevo framework de Javascript y es difícil mantenerse al día en cada framework si no encontramos un marco en común entre ellos. ¿Cómo crear la siguiente aplicación web y qué herramienta usar de manera que no quede obsoleta antes de acabar el producto?, ¿Cómo lo hacemos en Globant?, Veremos muchas cosas como Web Components, ES6, Typescript/Flow, CSS Frameworks, Unit testing e incluso Backend con Javascript.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Globant Week Cali - Entendiendo el desarrollo Front-end del mundo moderno.

  1. 1. 2003 2006 2008 2009 2012 2014 2015 2016 Fundación Acuerdo Google Inversión Riverwood Capital & FTV Capital Lanzamiento Studios Inversion WPP NYSE Follow on Public Offer Lanzamiento SOP HISTORIA Nuestros Clientes +7,200 Empleados Reconocimientos 2016 CAGR: 26,3% Crecimiento Económico 413 158 200 254 323 20172013 2014 2015 2017 Expansión en US. ABOUT US Globant Proprietary | Confidential Information
  2. 2. OUR STUDIOS Globant Proprietary | Confidential Information STRATEGIC SPECIALTY UX Studio Consulting Product Acceleration Continuous Evolution Internet of Things GamingMobile UI Engineering Big Data Scalable Platforms Artificial Intelligence Process Automation Cyber Security Quality Engineering Cloud Ops Digital Content Media OTT Future of Organizations Agile Delivery Stay Relevant FOUNDATION
  3. 3. Understanding the modern Front-End development Entendiendo el Front-End del mundo moderno
  4. 4. Entendiendo el Front-End del mundo moderno
  5. 5. Entendiendo el Front-End del mundo moderno
  6. 6. Entendiendo el Front-End del mundo moderno
  7. 7. ● Master in Computer Science - 2013. ● Front-end Architect ● Working in Globant since 2016. ● International Conference Speaker. ● FrontEnd Developer with more than 8 years of experience in industries such: ○ Event management. ○ Marketplaces. ○ Coffee. ○ Startups ● Technical Interviewer in Front-end. ● University Teacher ● Acamica Teacher in Ionic. ● Technical Advisor in Startup accelerator Perú ● Google Developers Group Medellín. @sebasgojs sebastian-gomez.com Entendiendo el Front-End del mundo moderno
  8. 8. Entendiendo el Front-End del mundo moderno Fuente: npm stats
  9. 9. Entendiendo el Front-End del mundo moderno
  10. 10. Web Sites Web Apps Entendiendo el Front-End del mundo moderno
  11. 11. Mobile App ❖ Serve content ❖ Subscribe ❖ Serve content ❖ Logic inside ➢ Buy / Sell ➢ Transaction ➢ Notifications ❖ Serve content ❖ Logic inside ❖ Installable through stores Low Medium High Low Medium High Low Medium High Web App Website Entendiendo el Front-End del mundo moderno
  12. 12. PWA ❖ Web App/Site built without coding too much ❖ Web App distribute through stores with same code base ❖ Web App/Site installable in devices that fulfill some rules Low Medium High Low Medium High Low Medium High Hybrid App AMP Entendiendo el Front-End del mundo moderno
  13. 13. Entendiendo el Front-End del mundo moderno To Native Apps WEB RESPONSIVE HYBRID CROSS-COMPILED User Interface Based on web components, consistent across platforms Performance Browser-like Supported Platforms Android & iOS Others (Blackberry) User Interface Right visualization of the Web content in the different mobile browsers and devices. Performance Browser-like User Interface Based on native components, unique across platforms Performance Native Supported Platforms Android & iOS (Latest versions) Native WrapperBrowser App Code App Code App Code Native Transpiled Code
  14. 14. Entendiendo el Front-End del mundo moderno ❖ Should you learn Angular 1? Did you know Angular 2 is out? They actually recently released Angular 4 recently too. ❖ What about Ember? They had a big rewrite. And Ember 2? Isn’t that better than ever? ❖ What about React? What should you learn? How do you stay up to date? ❖ And what about WebPack? ❖ Are you forgetting vue.js and Polymer?
  15. 15. Entendiendo el Front-End del mundo moderno How can I be update with the Javascript frameworks and initiatives? The answer is:
  16. 16. Entendiendo el Front-End del mundo moderno 10 Tips to keep you update in the Front-End World
  17. 17. Entendiendo el Front-End del mundo moderno 1. Javascript, Javascript and Javascript. ● Fundamentals ● Primitives ● Closures ● Functional ● OOP sum(1)(2); sum([1,2,3])([1,2,3]); typeof undefined; Object.prototype;
  18. 18. Entendiendo el Front-End del mundo moderno 2. Learn ES7 and ES9 by reading everyday http://www.ecma-international.org/ecma-262/9.0/index.html#sec- overview Symbol; Iterator; yield;
  19. 19. Entendiendo el Front-End del mundo moderno 3. Don’t forget static typing Interface ICar {/** */} class Car implements ICar { static price: number = 10; run(name: string: void {/** */} } But…. Javascript is functional function test(callback: Function) { /** */ return callback; } test(fn)(); // static type error
  20. 20. Entendiendo el Front-End del mundo moderno “Web Components allows the creation of reusable widgets or components in web documents and web applications”. 4. Web Components <script type="module" href="node_modules/@polymer/paper- button/paper-button.js"></script> … <paper-button raised class="indigo">raised</paper-button> const header = document.createElement('header'); const shadowRoot = header.attachShadow({mode: 'open'}); shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>'; // Could also use appendChild(). // header.shadowRoot === shadowRoot // shadowRoot.host === header
  21. 21. Entendiendo el Front-End del mundo moderno 5. Do not underestimate CSS :root { --main-bg-color: brown; } element { background-color: var(--main-bg-color); } calc(100% - 80px);
  22. 22. Entendiendo el Front-End del mundo moderno Structure well your styles. Know at least two preprocessors like SASS or LESS, and learn mixins.
  23. 23. Entendiendo el Front-End del mundo moderno Do not abuse CSS Frameworks
  24. 24. Entendiendo el Front-End del mundo moderno 6. Use State Management: Redux, Mobx, Sagax, Flux.
  25. 25. Entendiendo el Front-End del mundo moderno 7. Write Unit Test
  26. 26. Entendiendo el Front-End del mundo moderno 8. Learn Javascript for Backend
  27. 27. Entendiendo el Front-End del mundo moderno Webpack, parcel, jspm, yarn, npm Bundler & Package Manager
  28. 28. Entendiendo el Front-End del mundo moderno So... Let's talk about frameworks 9. Frameworks
  29. 29. Entendiendo el Front-End del mundo moderno Angular is superheroic JavaScript MVVM framework, founded in 2009, which is awesome for building highly interactive web applications.
  30. 30. Entendiendo el Front-End del mundo moderno ● Enhanced RXJS, faster compilation, new HttpClient launch. ● Detailed documentation. ● Two-way data binding. ● MVVM (Model-View-ViewModel) ● Dependency injection. Benefits:
  31. 31. Entendiendo el Front-End del mundo moderno ● Angular uses TypeScript. ● Migration issues. Companies that use Angular: Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegram, Weather, iStockphoto, AWS, Crunchbase. Drawbacks:
  32. 32. Entendiendo el Front-End del mundo moderno A JavaScript library for building user interfaces
  33. 33. Entendiendo el Front-End del mundo moderno ● Easy to learn. ● High level of flexibility and responsiveness. ● Virtual DOM (document object model) ● Downward data binding ● 100% open source JavaScript library ● Absolutely light-weighted. ● Migration is generally very easy Benefits:
  34. 34. Entendiendo el Front-End del mundo moderno ● Lack of official documentation  ● React is unopinionated  ● Long time to master. Drawbacks:
  35. 35. Entendiendo el Front-End del mundo moderno Companies that use ReactJS: Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Asana, Atlassian, Intercom, Microsoft.
  36. 36. Entendiendo el Front-End del mundo moderno JavaScript framework, launched in 2013, which perfectly fits for creating highly adaptable user interfaces and sophisticated Single-page applications.
  37. 37. Entendiendo el Front-End del mundo moderno ● Empowered HTML. ● Detailed documentation. ● Adaptability. ● Awesome integration. ● Large scaling. ● Tiny size. Benefits:
  38. 38. Entendiendo el Front-End del mundo moderno ● Lack of resources. ● Risk of over flexibility. ● Lack of full English documentation. Companies that use Vue.js: Xiaomi, Alibaba, WizzAir, EuroNews, Grammarly, Gitlab and Laracasts, Adobe, Behance, Codeship, Reuters. Drawbacks:
  39. 39. Entendiendo el Front-End del mundo moderno Finally use AI in Javascript 10. Frameworks
  40. 40. Entendiendo el Front-End del mundo moderno Neural Network in JS (No tensorflow) https://codepen.io/seagomezar/pen/gXVQPg?editors=0011 Neural Network in Tensorflow https://codepen.io/seagomezar/pen/ERqZrY?editors=0011
  41. 41. Questions? Follow me on twitter: @sebasgojs www.sebastian-gomez.com Just write me: s.gomez@globant.com
  42. 42. Entendiendo el Front-End del mundo moderno https://tinyurl.com/globantcali
  43. 43. We are ready!

×