31
Rights Reserved © 2015 Mirror for Android Performance Coding

Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Embed Size (px)

Citation preview

Page 1: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror for Android Performance Coding

Page 2: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

+Yossi Elkrief

@elkriefy

MaTriXy

Android Group leader Tikal Knowledge

Proud FatherAndroid developer since 2008GDG Beer Sheva co-founder & leaderAndroid Mentor @ Google CampusAndroid Lecturer & speakerLFC fan Androids collector

Page 3: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

What is Mirror ?

Page 4: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Prior to Mirror● AS - WYSIWYG layout editor● Static builds.● Preview layouts.● No Real live data.● Not actual device

Page 5: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror ● Android studio plugin● Client on Devices.● Standalone - Mirror Server.● Better way to build UI.● Fast (Saves the needs for builds)

Page 6: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror● Test dynamic, interactive UI elements.

● Display layouts on phone or tablet.

● Updating in real-time as you code.

● Hot Swap Code - Java/Kotlin.

Page 7: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

How Mirror works

Page 8: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - FoundationsTwo components: ● Server program that runs on build computer.● App that runs on each preview device.

Page 9: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Server(Studio/StandAlone)

● Server watches project, detects changes.■ resource files.■ Sample data files.■ Java/Kotlin files.■ dex/apk files

Page 10: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Server(Studio/StandAlone)

● Packages up the resources and sends them

to the attached devices.

● Mirror app renders the UI.

Page 11: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

What can i do?

Page 12: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Page 13: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Live-code

● Save your XML / Java / Kotlin / PNG files.

Check on devices in seconds.

● Rapidly experiment your layouts, custom

views and animations.

Page 14: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Prototype

● Create full-fidelity prototypes and collect

early feedback before coding Java.

● Reuse the code in production when the

prototype is approved.

Page 15: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Collaborate

● Trash design specs.

● Sit with your designer, make a change and

get instant feedback.

● Encourage them to create the layouts too!

Page 16: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Collaborate

● Make Designer Happy

Page 17: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Hot-swapping

● Mirror compiles incrementally.● Only sends deltas to the devices.● Hot-swapping resources, assets,

and Java / Kotlin code on multiple devices● View states on the layout are preserved

across refreshes.

Page 18: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Accurate, interactive previews

● Mirror’s app inflates layouts and renders

views the same way as your app does.

● Touch feedback, gestures and animations

are as accurate as they should be.

Page 19: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - REPL for Android UI development

● Experiment individual methods.● Feed and test custom view with different

datasets.● Build animations piecewise● Use code in production when ready

Page 20: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Custom views, custom fonts

● Preview layouts with third-party libraries or your own custom views.

● Live-code custom views and custom adapters.

● Preview custom fonts, custom attributes.

Page 21: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Learn/Teach Android coding

● Learn Android’s layout/resource system by building things that work on the real device.

● Experiment UI related APIs.● Learn by doing in a fast feedback loop.● Explain and Show Android UI fast and easy.

Page 22: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Sample data

● Build UI in a realistic context before coding Java.

● Simple XML to set text, image, visibility and more

● Populate list/grid with different item layouts

● Use Android’s “tools” attribute to populate views

Page 23: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror Saves Time

Page 24: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

● Live Layout Previews

● Sample Data

● Java/Kotlin Hot Swap

Page 25: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror

● Supports tools attributes - attributes set in layouts will show up in on-device preview.

● simulate dynamic data in static previews, Use: sample data.

Page 26: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Sample Data

● screen files - corresponds to a screen.

● Special elements in a screen file.

● Can be used to populate views with data.

Page 27: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - Sample Data

● Drawable files corresponds to a

drawable.

● Special elements in a drawable file.

● Can be used to populate views with

data.

Page 28: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Mirror - hot swap code

● Live-coding custom views, animations and interactions.

● Prototyping UI by populating views with mock data :

myCustomView.setData(someDataModel)

● Experimenting and learning UI related Android APIs by

executing code piecewise.

Page 29: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Get Mirror JimuLabs

Page 30: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Q&A

Page 31: Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal

Rights Reserved © 2015

Working at Tikal