Chico JS - Q4 Challenges

57
Chico JS @chicoui

description

This presentation has been given to the MercadoLibre UX area to update the team the project state. It speaks about the most important challenges in the Q4.

Transcript of Chico JS - Q4 Challenges

Page 1: Chico JS - Q4 Challenges

Chico JS@chicoui

Page 2: Chico JS - Q4 Challenges

Chico JS@chicoui

@hmammana

Page 3: Chico JS - Q4 Challenges

Chico JS@chicoui

@hmammana @lean8086

Page 4: Chico JS - Q4 Challenges

Chico JS@chicoui

@hmammana @lean8086@pazguille

Page 5: Chico JS - Q4 Challenges

Challenges

Reduce the inheritance levels & migrate to prototype

Unify Chico UI & Chico Mobile

Page 6: Chico JS - Q4 Challenges

Reduce & Migratereduce inheritance levels & migrate to prototype

Page 7: Chico JS - Q4 Challenges
Page 8: Chico JS - Q4 Challenges
Page 9: Chico JS - Q4 Challenges
Page 10: Chico JS - Q4 Challenges
Page 11: Chico JS - Q4 Challenges
Page 12: Chico JS - Q4 Challenges
Page 13: Chico JS - Q4 Challenges
Page 14: Chico JS - Q4 Challenges
Page 15: Chico JS - Q4 Challenges
Page 16: Chico JS - Q4 Challenges
Page 17: Chico JS - Q4 Challenges

Animal Kingdom

Aquatic Terrestrial Flyers

Page 18: Chico JS - Q4 Challenges

Animal Kingdom

Mammals Fishes Birds

Page 19: Chico JS - Q4 Challenges

Animal KingdomMammals ( female feed breedings )

Page 20: Chico JS - Q4 Challenges

Animal KingdomMammals ( female feed breedings )

Quadruped ( female feed breedings, 4 legs )

Page 21: Chico JS - Q4 Challenges

Animal KingdomMammals ( female feed breedings )

Quadruped ( female feed breedings, 4 legs )

Cat Dog

Page 22: Chico JS - Q4 Challenges

Animal KingdomMammals ( female feed breedings )

Quadruped ( female feed breedings, 4 legs )

Cat Dogfemale feed breedings female feed breedings

Page 23: Chico JS - Q4 Challenges

Animal KingdomMammals ( female feed breedings )

Quadruped ( female feed breedings, 4 legs )

Cat Dogfemale feed breedings female feed breedings4 legs 4 legs

Page 24: Chico JS - Q4 Challenges

Animal KingdomMammals ( female feed breedings )

Quadruped ( female feed breedings, 4 legs )

Cat Dogfemale feed breedings female feed breedings4 legs 4 legsmeows barks

Page 25: Chico JS - Q4 Challenges

But, where is Chico here?

Page 26: Chico JS - Q4 Challenges

Class inheritanceMammals ( female feed breedings )

Quadruped ( female feed breedings, 4 legs )

Cat Dogfemale feed breedings female feed breedings4 legs 4 legsmeows barks

Page 27: Chico JS - Q4 Challenges

Before the inheritances changes

Page 28: Chico JS - Q4 Challenges

Aquatic - Fish

Page 29: Chico JS - Q4 Challenges

Aquatic - Mammal

Page 30: Chico JS - Q4 Challenges

Flyer - Mammal

Page 31: Chico JS - Q4 Challenges

Flyer - Bird

Page 32: Chico JS - Q4 Challenges

Aquatic Flyers

Animal Kingdom

Page 33: Chico JS - Q4 Challenges

• open• close• is positioned

Page 34: Chico JS - Q4 Challenges

After the inheritances changes

Page 35: Chico JS - Q4 Challenges

After the inheritances changes

Page 36: Chico JS - Q4 Challenges

Reduce the inheritance levels & migrate to prototype

Unify Chico UI & Chico Mobile

Challenges

Page 37: Chico JS - Q4 Challenges

Migrate to prototypefast, less memory use and it is a standard

Page 38: Chico JS - Q4 Challenges

On the execution

Page 39: Chico JS - Q4 Challenges

On the execution

Page 40: Chico JS - Q4 Challenges

On the execution

Page 41: Chico JS - Q4 Challenges

On the execution

Page 42: Chico JS - Q4 Challenges

On the execution

Page 43: Chico JS - Q4 Challenges

On the execution

Page 44: Chico JS - Q4 Challenges

On the execution

Page 45: Chico JS - Q4 Challenges

On the execution

many executions by instance

Page 46: Chico JS - Q4 Challenges

The prototype property

Property that is an empty object at the start

Stored once in memory

Properties and methods are inherited by each instance

Page 47: Chico JS - Q4 Challenges

only once execution by instance

On the execution

Page 48: Chico JS - Q4 Challenges

Reduce the inheritance levels & migrate to prototype

Unify Chico UI & Chico Mobile

Challenges

Page 49: Chico JS - Q4 Challenges

Unify Chico UI & Chico Mobiletwo repositories same components

Page 50: Chico JS - Q4 Challenges

two repositories same components

Unify Chico UI & Chico Mobile

Page 51: Chico JS - Q4 Challenges

Code by repository

Page 52: Chico JS - Q4 Challenges

Code by repository

Page 53: Chico JS - Q4 Challenges

Code by repository

Page 54: Chico JS - Q4 Challenges

Bonus Track

New FeaturesWizardContentLook & Feel ImplementationSpinner Datagrid ControlForm Big InputsVersioned AssetsIconsNew BoxesMessage BoxesChico via CDNTests

ImprovementsUnified RepositoryClosable, Expandable, Viewport, debug, helpers, util, Collapsible, Menu, Widget, events, preload, Content, Positioner, cache, factory, supportModal & Lite ModalValidation Default MessagesClose - WAI-ARIAPositionerViewportCarouselOnly one sprite for fallback!Deprecated Styles DeletedDocumentation & Template

( only in the last 6 months :P )We also did it:

Page 55: Chico JS - Q4 Challenges

Bonus TrackWe also read it:

Pointer Events DraftNew CSS3 relative font size: remA Strategy for i18n and Node.jsRevisiting JavaScript ObjectsSHADOW DOM 101How we Learned to Stop Worrying and Love JavaScriptDesign, Viewport & ContentTesting @font-face Support on Mobile and TabletConditional loading of resources with mediaqueriesWhy you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classesLinks for Advanced JavaScript Reading

DOM Browser SupportMeasuring Performance On Mobile With Chrome DevTools + Remote DebuggingFirefox OS Simulator 1.0 is here!Decouple Your CSS From HTML With Reusable ModulesSub-Pixel Problems in CSSHow to Detect DOM Changes in CSSNative CSS feature detection via the @supports ruleConditional comments (Windows)JavaScript APIs you’ve never heard of (and some you have)CSS Grid Layout Draft

( only in the last 2 months, :O too nerdy )

Page 56: Chico JS - Q4 Challenges

Bonus TrackWe also speak about it:

Chico UI at JSConfARFrontEnd good practices at BA & San LuisHTML for developers at BA & San LuisOutline the content at BA The prototype property at BACSS good practices at BAJavaScript module pattern at BA

( during the year )