Material UI, React and Meteor

All in one talk about shiny new tecnologies and components and how to integrate them. #reactjs #meteorjs

Transcript

1. MATERIAL UI, REACT AND METEOR
2. THE BIG PICTURE FOR SPA UI/UX guidelines Components Platform
3. 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
4. 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
5. UI/UX GUIDELINES: MATERIAL UI https://www.google.com/design/spec/what-is-material/
7. Components
8. 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 ( )
9. ??? structure leak javascript . c a r o u s e l activated manually
10. WEBCOMPONENTS / POLYMER 1.0
11. WWW.POLYMER-PROJECT.ORG "PRODUCTION READY"
12. https://hacks.mozilla.org/2015/06/the-state-of-web- components/
13. https://myaccount.google.com/preferences
14. REACT 0.13
15. FACEBOOK.COM
16. PLATFORM: METEOR
17. http://info.meteor.com/blog/optimistic-ui-with-meteor- latency-compensation
18. 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
19. DEMO TIME
20. - - Demo source Material React Todo source
21. WORK SMARTER NOT HARDER
22. 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