UXINDIA17 - Let's Code to prototype

Let's Code to prototype

Transcript

2. HTTPS://GITHUB.COM/PIXELINGENE/ UXINDIA2017-REACT-PROTOTYPING VSCODE•WEBSTORM•NODE.JS•COMMAND LINE
3. PROTOTYPING LANDSCAPE
4. PROTOTYPING WITH CODE… CODE
5. UX CODE
6. UX ❤ CODE
7. LET’S CODE TO PROTOTYPE PAVAN PODILA SAPIENT @pavanpodila
10. SIMPLE DIGITAL ANALOG
11. JAVASCRIPT REACT <CODE/> <CODE/> <CODE/> <CODE/> {CODE} <CODE/> <CODE/> <CODE/> <CODE/>
12. JAVASCRIPT A Quick Tour
13. MODULES CLASSES FUNCTIONS LOOPS CONDITIONALS VARIABLES THE LAYERS OF PROGRAMMING SYNTAX
14. MODULES CLASSES FUNCTIONS LOOPS CONDITIONALS VARIABLES VARIABLES let a = `This is a ${fruit}`; const count = 100; let conference = { name: 'UX India', year: 2017, venue: 'Bengaluru' }; let birds = [ 'sparrow', 'eagle', 'peacock', 'hummingbird' ]; let shoppingList = [ { name: 'Cheese', count: 1 }, { name: 'Milk', count: 1 }, { name: 'Cucumber', count: 2 }, ];
15. MODULES CLASSES FUNCTIONS LOOPS CONDITIONALS VARIABLES CONDITIONALS const color = a === 'apple' ? 'red' : 'green'; if (a === 'apple') { // ok its an apple } else { // some other fruit }
16. MODULES CLASSES FUNCTIONS LOOPS CONDITIONALS VARIABLES LOOPS for (let x = 0; x < 10; x++) { console.log('I will not write on the wall again.'); } let morning = true; while (morning) { // show the sun }
17. MODULES CLASSES FUNCTIONS LOOPS CONDITIONALS VARIABLES FUNCTIONS function makePizza() { const config = { flavor: 'Hearty Veggies', base: 'Deep Dish', size: 12, sauce: 'normal', wellDone: true }; applyConfig(config); notifyDone('Pizza Ready!'); } function applyConfig(config) { // Use the config and prepare the pizza } function notifyDone(msg) { console.log(msg); }
18. MODULES CLASSES FUNCTIONS LOOPS CONDITIONALS VARIABLES FUNCTIONS function make5Rectangles() { return [0, 1, 2, 3, 4].map(y => { return ( <Rect x={0} y={100 + y * 10} /> ); }) } const onOkButtonClick = () => { console.log('Ok great!'); };
19. MODULES CLASSES FUNCTIONS LOOPS CONDITIONALS VARIABLES CLASSES class ColorBar extends React.Component { static defaultProps = { color: 'red' }; state = { currentValue: 'blue' }; constructor(props) { super(props) } render() { } componentDidMount() { } }
20. MODULES CLASSES FUNCTIONS LOOPS CONDITIONALS VARIABLES MODULES export default constants = { apiURL: 'http://localhost:3000', token: '1fafsr23fasdf' }; export function log(){} import constants, {log} from './constants'; log(constants) constants.js service.js
21. THE LAYERS OF PROGRAMMING SYNTAX MODULES CLASSES FUNCTIONS LOOPS CONDITIONALS VARIABLES
22. { CODE }
23. REACT UI Prototyping
24. <XML /> JAVASCRIPT CSS
25. REACT
26. COMPONENTS ALL THE WAY
27. COMPONENTS ALL THE WAY
28. COMPONENTS ALL THE WAY DOCUMENT ARTBOARD GROUP RECTANGLE LINE CIRCLE ARTBOARD ARTBOARD GROUP RECTANGLE
29. 00 05 10 15 20 25 30 35 40 45 50 55 12 1 2 3 4 5 6 7 8 9 10 11 Let's Code to Prototype Oct 20 Friday COMPONENTS ALL THE WAY
30. 00 05 10 15 20 25 30 35 40 45 50 55 12 1 2 3 4 5 6 7 8 9 10 11 Let's Code to Prototype Oct 20 Friday COMPONENTS ALL THE WAY
31. 00 05 10 15 20 25 30 35 40 45 50 55 12 1 2 3 4 5 6 7 8 9 10 11 Let's Code to Prototype Oct 20 Friday COMPONENTS ALL THE WAY
32. A COMPONENT RECEIVES INPUT PRODUCES OUTPUT HAS STATE
33. 2 TYPES OF COMPONENTS CONTAINER PRESENTATION DATA DATA PROP PROP PROP
34. COMPONENT LIFECYCLE will-mount will-unmount did-update will-update will-receive-props RENDER did-mount Mounting Updating Unmounting
35. REACT
36. { CODE } { CODE } { CODE } { CODE } { CODE } { CODE } { CODE } { CODE } { CODE }
37. LET’S CODE TO PROTOTYPE ACCOMPLISHMENT UNLOCKED @pavanpodila PAVAN PODILA ★ Picked up JavaScript ★ Learnt the React UI framework ★ Did Component-oriented Development ★ SVG ★ Built many Watch Faces