DroidCon TLV 2015 - Hey android, mirror mirror all day long

Android Has various UI Editor to work with but all comes to WYSIWYG and waiting for app to compile and install on the device.
Join me and we overview a great tool to save UI Build and Test time.
Deploy to multiple devices, Java/Kotlin Code Hot swap, Animation building and testing process is made easy.

Transcript

1. Rights Reserved © 2015 Mirror for Android Performance Coding
2. Rights Reserved © 2015 +Yossi Elkrief @elkriefy MaTriXy Android Group leader Tikal Knowledge Proud Father Android developer since 2008 GDG Beer Sheva co-founder & leader Android Mentor @ Google Campus Android Lecturer & speaker LFC fan Androids collector
3. Rights Reserved © 2015 What is Mirror ?
4. Rights Reserved © 2015 Prior to Mirror • AS - WYSIWYG layout editor • Static builds. • Preview layouts. • No Real live data. • Not actual device
5. Rights Reserved © 2015 Mirror • Android studio plugin • Client on Devices. • Standalone - Mirror Server. • Better way to build UI. • Fast (Saves the needs for builds)
6. 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.
7. Rights Reserved © 2015 How Mirror works
8. Rights Reserved © 2015 Mirror - Foundations Two components: • Server program that runs on build computer. • App that runs on each preview device.
9. Rights Reserved © 2015 Mirror - Server(Studio/StandAlone) • Server watches project, detects changes. ▪ resource files. ▪ Sample data files. ▪ Java/Kotlin files. ▪ dex/apk files
10. Rights Reserved © 2015 Mirror - Server(Studio/StandAlone) • Packages up the resources and sends them to the attached devices. • Mirror app renders the UI.
11. Rights Reserved © 2015 What can i do?
12. Rights Reserved © 2015
13. 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.
14. 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.
15. 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!
16. Rights Reserved © 2015 Mirror - Collaborate • Make Designer Happy
17. 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.
18. 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.
19. 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
20. 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.
21. 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.
22. 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
23. Rights Reserved © 2015 Video Samples
24. Rights Reserved © 2015 Video Samples
25. Rights Reserved © 2015 Mirror Saves Time
26. Rights Reserved © 2015 • Live Layout Previews • Sample Data • Java/Kotlin Hot Swap
27. 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.
28. 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.
29. 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.
30. 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.
31. Rights Reserved © 2015 Mirror Live Demo
32. Rights Reserved © 2015 Q&A
33. Rights Reserved © 2015 Working at Tikal