Tweet
Tweet

Slide 1

Slide 1 text

MATERIAL UI, REACT AND METEOR

Slide 2

Slide 2 text

THE BIG PICTURE FOR SPA UI/UX guidelines Components Platform

Slide 3

Slide 3 text

Luigi Maselli Job: dev freelance + hackerpreneur + instructor + remote worker Founder: @TorinoJS "Meteor Italia" @openfuffa Interests: #javascript #meteorjs #docker #opendata #rustlang #swimming #travels #trekking open source contributor

Slide 4

Slide 4 text

Realtime news about #expo2015 on Twitter Mobile ticket payment for public transportation Self sight evaluation with a screen and smartphone expo2015monitor.grigio.org openmove.org vision.vega9.com

Slide 5

Slide 5 text

UI/UX GUIDELINES: MATERIAL UI https://www.google.com/design/spec/what-is-material/

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Components

Slide 8

Slide 8 text

Bootstrap < d i v i d = " c a r o u s e l - e x a m p l e - g e n e r i c " c l a s s = " c a r o u s e l s l i d e " d a t a - r i d e = " c a r o u s e l . . . < d i v c l a s s = " c a r o u s e l - i n n e r " r o l e = " l i s t b o x " > < d i v c l a s s = " i t e m a c t i v e " > < i m g s r c = " . . . " a l t = " . . . " > < d i v c l a s s = " c a r o u s e l - c a p t i o n " > / / c a r o u s e l a c t i v a t i o n , i s t h e D O M r e a d y ? $ ( ' . c a r o u s e l ' ) . c a r o u s e l ( )

Slide 9

Slide 9 text

??? structure leak javascript . c a r o u s e l activated manually

Slide 10

Slide 10 text

WEBCOMPONENTS / POLYMER 1.0

Slide 11

Slide 11 text

WWW.POLYMER-PROJECT.ORG "PRODUCTION READY"

Slide 12

Slide 12 text

https://hacks.mozilla.org/2015/06/the-state-of-web- components/

Slide 13

Slide 13 text

https://myaccount.google.com/preferences

Slide 14

Slide 14 text

REACT 0.13

Slide 15

Slide 15 text

FACEBOOK.COM

Slide 16

Slide 16 text

PLATFORM: METEOR

Slide 17

Slide 17 text

http://info.meteor.com/blog/optimistic-ui-with-meteor- latency-compensation

Slide 18

Slide 18 text

GETTING STARTED # g i t c l o n e h t t p s : / / g i t h u b . c o m / m e t e o r / r e a c t - p a c k a g e s / p a t h / t o # e x p o r t P A C K A G E _ D I R S = / p a t h / t o / r e a c t - p a c k a g e s m e t e o r a d d b a b e l - c o m p i l e r b a b e l - r u n t i m e j s x r e a c t - m e t e o r - d a t a m e t e o r a d d c o s m o s : b r o w s e r i f y m e t e o r c r e a t e - - p a c k a g e b r o w s e r i f y - d e p s m e t e o r a d d b r o w s e r i f y - d e p s

Slide 19

Slide 19 text

DEMO TIME

Slide 20

Slide 20 text

- - Demo source Material React Todo source

Slide 21

Slide 21 text

WORK SMARTER NOT HARDER

Slide 22

Slide 22 text

THANKS Contacts Luigi Maselli slides.md: twitter @ g r i g i 0 <= ( it's a zero ) blog: http://bit.ly/tojs-mui http://grigio.org