Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A simple <button />
It’s a composable UI component
<button onClick={callMeOnClick}>Click Me!</button>
Composition, Good old days
<button class=”btn btn--tarmac btn--large”>
Click Me!
</button>
<Button />
An enhanced <button /> component
<Button text="Click Me!" color="tarmac" />
◉ Uses the <button /> under the hoo...
<Button /> with icon
<Button /> version 1.1
<Button color="yellow" icon="edit" text="Edit" />
◉ Uses the <Icon /> under th...
<Button /> with colored icon
<Button /> version 1.2
<Button color="yellow" icon="edit"
iconColor="black" text="Edit" />
◉ ...
That’s Exactly What
We Should Not Do
!
Why not to do?
◉ Lack of composition via consumer developer
◉ Lack of separation of concerns
◉ Code duplication
◉ Maintena...
What I Talk About
When I Talk About Composition
I am Mehdi
Software Engineer at Autopilot
@mehdivk
hi@mv.id.au
Hello!
“
Front-end development at Autopilot is the
process of building sophisticated user
interfaces consisting of thousands of
s...
<Button />, revised
To compose <Icon />
<Button>
<Icon size="small" color="black" symbol="edit" />
Edit
</Button>
What composition actually offers?
◉ Maximum flexibility
◉ Minimum coupling
◉ Maintainable components
◉ Testable components
Showcase Time
<Modal />
<Modal />
<Modal size={modalSize} type={modalType}>
<ModalHeader></ModalHeader>
<ModalContent></ModalContent>
<ModalFooter...
<Modal />
Overlays the other elements on page
<Modal />
<Position xAxis="center" yAxis="center">
<Overlay>
<Modal>
<ModalHeader />
<ModalContent />
<ModalFooter />
</Mo...
<FolderExplorer />
<FolderExplorer />
<Position anchor="someElement">
<FolderExplorer />
</Position>
<ContextMenu />
<ContextMenu />
<Position anchor="someElement">
<DropDownMenu>
<DropDownMenuOption icon="edit" onClick={onEditClick}>Edit<...
<ContextMenu />
Forms
Forms
<Form labelOn="top" size="large" ref={this.setFormReference}>
<Element id="goalName">
<Label text="Goal name" />
<Te...
Forms
<Form labelOn="top" size="large" ref={this.setFormReference}>
<Element id="goalName">
<Label text="Goal name" />
<Te...
Forms
<Form labelOn="top" size="large" ref={this.setFormReference}>
<Element id="goalName">
<Label text="Goal name" />
<Te...
Forms
<Form labelOn="top" size="large" ref={this.setFormReference}>
<Element id="goalName">
<Label text="Goal name" />
<Te...
Forms
<Form labelOn="top" size="large" ref={this.setFormReference}>
<Element id="goalName">
<Label text="Goal name" />
<Te...
Forms
this.goalForm.validate();
this.goalForm.isValid();
this.goalForm.value();
this.goalForm.value('conversionTarget');
Forms
<Table />
<Table />
<Table dataSource={this.props.assets} className="asset-manager__table">
<TableCell header="Status">
<TableRowSta...
Any questions ?
You can find me at
◉ @mehdivk
◉ hi@mv.id.au
Thanks!
Upcoming SlideShare
Loading in …5
×

What I Talk About When I Talk About Composition

A talk about UI, React, Composition and Front-end engineering at Autopilot.

  • Be the first to comment

What I Talk About When I Talk About Composition

  1. 1. A simple <button /> It’s a composable UI component <button onClick={callMeOnClick}>Click Me!</button>
  2. 2. Composition, Good old days <button class=”btn btn--tarmac btn--large”> Click Me! </button>
  3. 3. <Button /> An enhanced <button /> component <Button text="Click Me!" color="tarmac" /> ◉ Uses the <button /> under the hood ◉ Enhances the <button /> via “color” field
  4. 4. <Button /> with icon <Button /> version 1.1 <Button color="yellow" icon="edit" text="Edit" /> ◉ Uses the <Icon /> under the hood ◉ Configure the icon via “icon” field
  5. 5. <Button /> with colored icon <Button /> version 1.2 <Button color="yellow" icon="edit" iconColor="black" text="Edit" /> ◉ Icon color via the “iconColor” field
  6. 6. That’s Exactly What We Should Not Do !
  7. 7. Why not to do? ◉ Lack of composition via consumer developer ◉ Lack of separation of concerns ◉ Code duplication ◉ Maintenance overhead ◉ Test overhead
  8. 8. What I Talk About When I Talk About Composition
  9. 9. I am Mehdi Software Engineer at Autopilot @mehdivk hi@mv.id.au Hello!
  10. 10. “ Front-end development at Autopilot is the process of building sophisticated user interfaces consisting of thousands of small, focused, testable and composable components.
  11. 11. <Button />, revised To compose <Icon /> <Button> <Icon size="small" color="black" symbol="edit" /> Edit </Button>
  12. 12. What composition actually offers? ◉ Maximum flexibility ◉ Minimum coupling ◉ Maintainable components ◉ Testable components
  13. 13. Showcase Time
  14. 14. <Modal />
  15. 15. <Modal /> <Modal size={modalSize} type={modalType}> <ModalHeader></ModalHeader> <ModalContent></ModalContent> <ModalFooter></ModalFooter> <ModalClose></ModalClose> </Modal>
  16. 16. <Modal /> Overlays the other elements on page
  17. 17. <Modal /> <Position xAxis="center" yAxis="center"> <Overlay> <Modal> <ModalHeader /> <ModalContent /> <ModalFooter /> </Modal> </Overlay> </Position> Overlays the other elements on page
  18. 18. <FolderExplorer />
  19. 19. <FolderExplorer /> <Position anchor="someElement"> <FolderExplorer /> </Position>
  20. 20. <ContextMenu />
  21. 21. <ContextMenu /> <Position anchor="someElement"> <DropDownMenu> <DropDownMenuOption icon="edit" onClick={onEditClick}>Edit</DropDownMenuOption> <DropDownMenuOption icon="trash" onClick={onTrash}>Trash</DropDownMenuOption> <DropDownMenuOption icon="folder" disabled>Move to folder</DropDownMenuOption> </DropDownMenu> </Position>
  22. 22. <ContextMenu />
  23. 23. Forms
  24. 24. Forms <Form labelOn="top" size="large" ref={this.setFormReference}> <Element id="goalName"> <Label text="Goal name" /> <TextBox placeholder="Type what people become who complete the goal, e.g. customer" /> <Validator> <Required /> </Validator> </Element> <Elements> <Label text="Conversion target" /> <Element id="conversionTarget" className="goal-form__conversion-target"> <TextBox placeholder="10" /> <Validator> <Required /> { this.state.conversionType ? <ValidConversionTarget type={this.state.conversionType} /> : null } </Validator> </Element> <Element id="conversionTargetType"> <ComboBox placeholder="Please select" options={conversionTargetTypes} onChange={this.onConversionTypeChange} /> <Validator> <Required /> </Validator> </Element> </Elements> </Form>
  25. 25. Forms <Form labelOn="top" size="large" ref={this.setFormReference}> <Element id="goalName"> <Label text="Goal name" /> <TextBox placeholder="Type what people become who complete the goal, e.g. customer" /> <Validator> <Required /> </Validator> </Element> <Elements> <Label text="Conversion target" /> <Element id="conversionTarget" className="goal-form__conversion-target"> <TextBox placeholder="10" /> <Validator> <Required /> { this.state.conversionType ? <ValidConversionTarget type={this.state.conversionType} /> : null } </Validator> </Element> <Element id="conversionTargetType"> <ComboBox placeholder="Please select" options={conversionTargetTypes} onChange={this.onConversionTypeChange} /> <Validator> <Required /> </Validator> </Element> </Elements> </Form>
  26. 26. Forms <Form labelOn="top" size="large" ref={this.setFormReference}> <Element id="goalName"> <Label text="Goal name" /> <TextBox placeholder="Type what people become who complete the goal, e.g. customer" /> <Validator> <Required /> </Validator> </Element> <Elements> <Label text="Conversion target" /> <Element id="conversionTarget" className="goal-form__conversion-target"> <TextBox placeholder="10" /> <Validator> <Required /> { this.state.conversionType ? <ValidConversionTarget type={this.state.conversionType} /> : null } </Validator> </Element> <Element id="conversionTargetType"> <ComboBox placeholder="Please select" options={conversionTargetTypes} onChange={this.onConversionTypeChange} /> <Validator> <Required /> </Validator> </Element> </Elements> </Form>
  27. 27. Forms <Form labelOn="top" size="large" ref={this.setFormReference}> <Element id="goalName"> <Label text="Goal name" /> <TextBox placeholder="Type what people become who complete the goal, e.g. customer" /> <Validator> <Required /> </Validator> </Element> <Elements> <Label text="Conversion target" /> <Element id="conversionTarget" className="goal-form__conversion-target"> <TextBox placeholder="10" /> <Validator> <Required /> { this.state.conversionType ? <ValidConversionTarget type={this.state.conversionType} /> : null } </Validator> </Element> <Element id="conversionTargetType"> <ComboBox placeholder="Please select" options={conversionTargetTypes} onChange={this.onConversionTypeChange} /> <Validator> <Required /> </Validator> </Element> </Elements> </Form>
  28. 28. Forms <Form labelOn="top" size="large" ref={this.setFormReference}> <Element id="goalName"> <Label text="Goal name" /> <TextBox placeholder="Type what people become who complete the goal, e.g. customer" /> <Validator> <Required /> </Validator> </Element> <Elements> <Label text="Conversion target" /> <Element id="conversionTarget" className="goal-form__conversion-target"> <TextBox placeholder="10" /> <Validator> <Required /> { this.state.conversionType ? <ValidConversionTarget type={this.state.conversionType} /> : null } </Validator> </Element> <Element id="conversionTargetType"> <ComboBox placeholder="Please select" options={conversionTargetTypes} onChange={this.onConversionTypeChange} /> <Validator> <Required /> </Validator> </Element> </Elements> </Form>
  29. 29. Forms this.goalForm.validate(); this.goalForm.isValid(); this.goalForm.value(); this.goalForm.value('conversionTarget');
  30. 30. Forms
  31. 31. <Table />
  32. 32. <Table /> <Table dataSource={this.props.assets} className="asset-manager__table"> <TableCell header="Status"> <TableRowStatus field="status" valueToColorMap={valueToColorMap} /> </TableCell> <TableCell header="Name"> <TableCellValue field="name" /> </TableCell> <TableCell header="In Journeys"> <TableCellValue field="inJourneys" /> </TableCell> <TableCell header="Type"> <TableCellValue format="camel-case" field="type" /> </TableCell> <TableCell header="Created By"> <TableCellValue field="createdBy" /> </TableCell> <TableCell header="Edited"> <TableCellValue format="date" field="edited" /> </TableCell> <TableCell header="Published"> <TableCellValue format="date" field="published" /> </TableCell> </Table>
  33. 33. Any questions ? You can find me at ◉ @mehdivk ◉ hi@mv.id.au Thanks!

×