Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build your UI Developer Toolbox using Playgrounds

Build your UI Developer Toolbox using Playgrounds

Talk at FrenchKit about how to leverage Playgrounds to build real component helping you to iterate faster while developing UI

Hugues Bernet-Rollande

September 22, 2016
Tweet

More Decks by Hugues Bernet-Rollande

Other Decks in Programming

Transcript

  1. BUILD YOUR UI DEVELOPER TOOLBOX IN SWIFT PLAYGROUND HUGUES BERNET-ROLLANDE

    @ROMPELSTILCHEN GITHUB.COM/HUGUESBR CHIEF SOFTWARE OFFICER @ WIRED BEAUTY 1
  2. BUILD YOUR UI DEVELOPER TOOLBOX IN SWIFT PLAYGROUND @rompelstilchen A

    WORKMAN IS AS GOOD AS HIS TOOLS @rompelstilchen 2 Some wise man
  3. @rompelstilchen 3 @rompelstilchen

  4. BUILD YOUR UI DEVELOPER TOOLBOX IN SWIFT PLAYGROUND @rompelstilchen A

    DEVELOPER IS AS GOOD AS HIS ABILITY TO IMPROVE HIS TOOLS Hugues Bernet-Rollande 4
  5. WHY? BUILD YOUR UI DEVELOPER TOOLBOX IN SWIFT PLAYGROUNDS 5

    @rompelstilchen
  6. 6 @rompelstilchen

  7. CAMEDIATIMINGFUNCTIONCONTROL BUILD YOUR UI DEVELOPER TOOLBOX IN SWIFT PLAYGROUND 7

    @rompelstilchen
  8. @rompelstilchen 8 @rompelstilchen @rompelstilchen

  9. BUILD YOUR UI DEVELOPER TOOLBOX IN SWIFT PLAYGROUND USING THE

    CAMEDIATIMINGFUNCTIONCONTROL import XCPlayground // canvas let view = UIView() XCPlaygroundPage.currentPage.liveView = view // sampleView view.addSubview(SampleView()) // custom built CAMediaTimingFunctionControl let mediaTimingControl = CAMediaTimingFunctionControl() view.addSubview(mediaTimingControl) // update sample view timing function on change mediaTimingControl.onValueDidChange = { sampleView.timingFunction = $0 } 9 @rompelstilchen
  10. VIEW RESIZER BUILD YOUR UI DEVELOPER TOOLBOX IN SWIFT PLAYGROUND

    10 @rompelstilchen
  11. @rompelstilchen 11 @rompelstilchen @rompelstilchen

  12. BUILD YOUR UI DEVELOPER TOOLBOX IN SWIFT PLAYGROUND USING RESIZER

    CONTROL import XCPlayground // canvas let view = UIView() XCPlaygroundPage.currentPage.liveView = view // resize control let resizableView = ResizableView() view.addSubview(resizableView) // sampleView resizableView.contentView = SampleView() 12 @rompelstilchen
  13. CAVEATS BUILD YOUR UI DEVELOPER TOOLBOX IN SWIFT PLAYGROUND 13

    @rompelstilchen
  14. BUILD YOUR UI DEVELOPER TOOLBOX IN SWIFT PLAYGROUND @rompelstilchen CAVEATS

    ▸Playground are slow and unstable ▸Copy/paste of code (your view) ▸Need to (sometime) adapt your view 14
  15. WHAT’S NEXT? BUILD YOUR UI DEVELOPER TOOLBOX IN SWIFT PLAYGROUND

    15 @rompelstilchen
  16. iPad Swift Playground NSDateFormatter Rulers LoremLipsum X C A s

    s e t s C o l o r W h e e l C u s t o m T r a n s i t i o n e r r o r e t c a n i m a t i o n s l i d e r A p p I c o n Generator random color include incomplete gradient issue missing AnimationSequencer Sequence Generator number Curve Alternate 16
  17. THANK YOU! PRESENTATION AVAILABLE AT: HTTP://BIT.LY/225SIBM HUGUES BERNET-ROLLANDE @ROMPELSTILCHEN GITHUB.COM/HUGUESBR

    CSO ENGINEER @ WIRED BEAUTY 17