Zhi — Live Reload Auto Layout Constraints

Zhi is a Swift library that lets you tweak Auto Layout constraints and watch your app update immediately without a rebuild + run cycle.

Transcript

1. ZHI LIVE RELOAD AUTO LAYOUT CONSTRAINTS - BOON
2. REDUCE BUILD + NAVIGATE CYCLES
3. EXISTING TOOLS
4. iOS ▸ Injection for Xcode ▸ React Native Others ▸ Web applications, generally ▸ Android Studio's Instant Run ▸ Smalltalk
5. DEMO
6. HOW IT WORKS
7. 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
8. STYLE FILES ▸ Loads style files from project directory and fallback to app bundle ▸ Line-based ▸ 1 instruction per line
9. VISUAL FORMAT LANGUAGE ##m1=80 H:|[v1][v2]-m1-| H:|[v3][v4]-m1-| V:|[v1]| V:|[v2]| + Margins
10. EQUATION-LIKE SYNTAX celf.left = v1.left l.left = celf.leftMargin l.top = celf.topMargin
11. COMMENTS #celf.left = v1.left vs celf.left = v1.left
12. PROPERTIES v1.backgroundColor = rgb(90, 200, 250) v2.backgroundColor = gray v3.backgroundColor = rgba(100, 204, 0, 0.3)
13. # 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
14. SET IT UP class MyViewController: UIViewController { createViews() styler.views = ["celf": mainView, "v1": v1, "v2": v2] styler.liveReload(view: view) }
15. IMPLEMENTATION
16. ▸ (NS)Scanner + simple string parsing ▸ Parser reads each line and treat them as individual instructions ▸ Watching the style files for changes and parsing + reapplying
17. 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/
18. ▸ @hboon ▸ https://github.com/hboon/zhi ▸ http://hboon.com/iosdevnuggets/
20. 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