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

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

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

Understanding the modern
Front-End development
Entendiendo el Front-End del mundo moderno

● 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

Fuente: npm stats

Web Sites Web Apps

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

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

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

❖ 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?

How can I be update with the Javascript
frameworks and initiatives?
The answer is:

10
Tips to keep you update in the
Front-End World

1. Javascript, Javascript and Javascript.
● Fundamentals
● Primitives
● Closures
● Functional
● OOP
sum(1)(2);
sum([1,2,3])([1,2,3]);
typeof undefined;
Object.prototype;

2. Learn ES7 and ES9 by reading everyday
http://www.ecma-international.org/ecma-262/9.0/index.html#sec-
overview
Symbol;
Iterator;
yield;

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

“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

5. Do not underestimate CSS
:root {
--main-bg-color: brown;
}
element {
background-color: var(--main-bg-color);
}
calc(100% - 80px);

Structure well your styles. Know at least
two preprocessors like SASS or LESS, and
learn mixins.

Do not abuse CSS Frameworks

6. Use State Management:
Redux, Mobx, Sagax, Flux.

7. Write Unit Test

8. Learn Javascript for Backend

Webpack, parcel, jspm, yarn, npm
Bundler & Package Manager

So...
Let's talk about frameworks
9. Frameworks

Angular is superheroic JavaScript MVVM
framework, founded in 2009, which is
awesome for building highly interactive
web applications.

● Enhanced RXJS, faster compilation, new
HttpClient launch.
● Detailed documentation.
● Two-way data binding.
● MVVM (Model-View-ViewModel)
● Dependency injection.
Benefits:

● Angular uses TypeScript.
● Migration issues.
Companies that use Angular: Upwork,
Freelancer, Udemy, YouTube, Paypal, Nike,
Google, Telegram, Weather, iStockphoto,
AWS, Crunchbase.
Drawbacks:

A JavaScript library for building
user interfaces

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

● Lack of official documentation
● React is unopinionated
● Long time to master.
Drawbacks:

Companies that use ReactJS:
Facebook, Instagram, Netflix, New York
Times, Yahoo, Khan Academy, Whatsapp,
Codecademy, Dropbox, Airbnb, Asana,
Atlassian, Intercom, Microsoft.

JavaScript framework, launched in 2013,
which perfectly fits for creating highly
adaptable user interfaces and
sophisticated Single-page applications.

● Empowered HTML.
● Detailed documentation.
● Adaptability.
● Awesome integration.
● Large scaling.
● Tiny size.
Benefits:

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

Finally use AI in Javascript
10. Frameworks

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

Questions?
Follow me on twitter:
@sebasgojs
www.sebastian-gomez.com
Just write me:
s.gomez@globant.com

https://tinyurl.com/globantcali

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

Recommended

Recommended

More Related Content

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

Similar to Globant Week Cali - Entendiendo el desarrollo Front-end del mundo moderno. (20)

More from Globant

More from Globant (20)

Recently uploaded

Recently uploaded (20)

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