Zhi — Live Reload Auto Layout Constraints

Slide 1

Slide 1 text

ZHI LIVE RELOAD AUTO LAYOUT CONSTRAINTS - BOON

Slide 2

Slide 2 text

REDUCE BUILD + NAVIGATE CYCLES

Slide 3

Slide 3 text

EXISTING TOOLS

Slide 4

Slide 4 text

iOS ▸ Injection for Xcode ▸ React Native Others ▸ Web applications, generally ▸ Android Studio's Instant Run ▸ Smalltalk

Slide 5

Slide 5 text

DEMO

Slide 6

Slide 6 text

HOW IT WORKS

Slide 7

Slide 7 text

View hierarchy in Swift: let mainView = UIView() let v1 = UIView() let v2 = UIView() let label = UILabel() let button = UIButton(type: .system) let imageView = UIImageView() Styles: H:|[v1][v2]-m1-| celf.left = v1.left

Slide 8

Slide 8 text

STYLE FILES ▸ Loads style files from project directory and fallback to app bundle ▸ Line-based ▸ 1 instruction per line

Slide 9

Slide 9 text

VISUAL FORMAT LANGUAGE ##m1=80 H:|[v1][v2]-m1-| H:|[v3][v4]-m1-| V:|[v1]| V:|[v2]| + Margins

Slide 10

Slide 10 text

EQUATION-LIKE SYNTAX celf.left = v1.left l.left = celf.leftMargin l.top = celf.topMargin

Slide 11

Slide 11 text

COMMENTS #celf.left = v1.left vs celf.left = v1.left

Slide 12

Slide 12 text

PROPERTIES v1.backgroundColor = rgb(90, 200, 250) v2.backgroundColor = gray v3.backgroundColor = rgba(100, 204, 0, 0.3)

Slide 13

Slide 13 text

# UILabel l.text = Image: l.color = rgb(0, 138, 0) l.backgroundColor = rgb(100, 204, 0) # UIImageView i.backgroundColor = gray i.contentMode = scaleAspectFill i.clipsToBounds = true i.image = color.jpeg #i.image = dark.jpeg # Button b.color = rgb(255, 0, 0) b.title = Tap Me b.enabled = true b.textStyle = largeTitle

Slide 14

Slide 14 text

SET IT UP class MyViewController: UIViewController { createViews() styler.views = ["celf": mainView, "v1": v1, "v2": v2] styler.liveReload(view: view) }

Slide 15

Slide 15 text

IMPLEMENTATION

Slide 16

Slide 16 text

▸ (NS)Scanner + simple string parsing ▸ Parser reads each line and treat them as individual instructions ▸ Watching the style files for changes and parsing + reapplying

Slide 17

Slide 17 text

LINKS ▸ Smalltalk (Pharo) https://pharo.org ▸ Injection for Xcode https://github.com/johnno1962/ injectionforxcode ▸ Reveal https://revealapp.com ▸ React Native https://facebook.github.io/react-native/

Slide 18

Slide 18 text

▸ @hboon ▸ https://github.com/hboon/zhi ▸ http://hboon.com/iosdevnuggets/

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

LIMITATIONS ▸ Constraint priority ▸ Animation by changing constant ▸ “Partial updating” of constraints set ▸ Need to rebuild when we change view hierarchy ▸ Better integrated with view controllers, and not views