SlideShare a Scribd company logo
MIRROR – UI DEVELOPMENT 
ON STEROIDS
ABOUT ME 
SYLWESTER MADEJ 
@smdremedy 
sylwester.madej@byoutline.com 
http://byoutline.com 
http://soldiersofmobile.com
MY PROBLEMS (YOURS TOO?!) 
1. UI REQUIRES LOTS OF WORK 
2. TESING ON DEVICE / EMU IS PAIN 
3. AS BUILD + DEPLOY IS SLOOOW (ONE THING ECLIPSE IS WINNING) 
4. PREVIEW ON IS STATIC (WHEN IT WORKS) 
5. F* WORD OF ANDROID (FRAGMENTATION)
BEHOLD MIRROR 
“Mirror” = “no More compile-Install-Run to see youR UI changes On Real devices” 
● http://jimulabs.com/ 
● AS plugin + server on desktop + client on device 
● Save 20+ seconds per change, hours per day 
● New way to iterate your design 
● Paid $79
HOT SWAP YOUR RESOURCES 
● Preview your Layout, Drawable, Animator, Styles, Assets, … 
● Dynamic preview – test your animations, selectors, gestures 
● Test your resources on multiple devices at once (VIDEO)
SAMPLE DATA FTW! 
● Meta data in directory „mirror” 
● Add some XML to preview your layout with „real” data (no more mock adapters) 
●Works out-of-the-box with texts, images and basic attributes 
● Fill your ListView, GridView with data, even different layouts per item
CUSTOM VIEWS - FINALLY 
● Preview layouts with CustomViews 
● Code is hot swapped on recompilation 
● Use your custom attributes in sample data
MIRROR.JS (PREVIEW) 
● Provide behaviour for your Mirror screens in JS 
● Feels like Jquery 
● Great way to prototype your animations 
● Combine animations: together, sequence, delay 
● OnClick – start animations, link screens... 
● Export your prototype to APK!
LIVE DEMO 
● https://github.com/jimulabs/mirror-samples
BONUS: 90 day trial 
● http://bit.ly/mirrorlodz
Thank you 
SYLWESTER MADEJ 
@smdremedy 
sylwester.madej@byoutline.com 
http://byoutline.com 
http://soldiersofmobile.com

More Related Content

What's hot

Providing the ultimate publishing experience
Providing the ultimate publishing experienceProviding the ultimate publishing experience
Providing the ultimate publishing experience
Shakeeb Ahmed
 
Wulin kungfu final
Wulin kungfu finalWulin kungfu final
Wulin kungfu final
Jimmy Huang
 
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesSlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
reebalazs
 
Pokelabo flash 2013/4
Pokelabo flash 2013/4Pokelabo flash 2013/4
Pokelabo flash 2013/4
Shota Suzuki
 
Automate devmachinesetup
Automate devmachinesetupAutomate devmachinesetup
Automate devmachinesetup
Ashish K Agarwal
 
City Mouse Mobile - A Case Study
City Mouse Mobile - A Case StudyCity Mouse Mobile - A Case Study
City Mouse Mobile - A Case Study
Serge Krul
 
Assignment D
Assignment DAssignment D
Assignment D
Songyo
 
Sx sw speaker proposal slides
Sx sw speaker proposal slidesSx sw speaker proposal slides
Sx sw speaker proposal slides
Mitch Williams
 
Build the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-FrameBuild the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-Frame
Mozilla VR
 
What a web developer would like to have…
What a web developer would like to have…What a web developer would like to have…
What a web developer would like to have…
Giovanni Costagliola
 
【Unite 2017 Tokyo】EditorVRの設計から学んだこと:使えるVRエディターのためのデザイン
【Unite 2017 Tokyo】EditorVRの設計から学んだこと:使えるVRエディターのためのデザイン【Unite 2017 Tokyo】EditorVRの設計から学んだこと:使えるVRエディターのためのデザイン
【Unite 2017 Tokyo】EditorVRの設計から学んだこと:使えるVRエディターのためのデザイン
Unite2017Tokyo
 
Establishing Performance Contexts
Establishing Performance ContextsEstablishing Performance Contexts
Establishing Performance Contexts
ianfeather
 
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...
Autodesk
 
Sp Design
Sp DesignSp Design
Sp Design
rsnarayanan
 
Game development via_sprite_kit
Game development via_sprite_kitGame development via_sprite_kit
Game development via_sprite_kit
Buşra Deniz, CSM
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
Paul Bakaus
 
Making HTML5 Games with Phaser
Making HTML5 Games with PhaserMaking HTML5 Games with Phaser
Making HTML5 Games with Phaser
IndieOutpost
 
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
Unity Technologies Japan K.K.
 
Cross Game Dev with Corona
Cross Game Dev with CoronaCross Game Dev with Corona
Cross Game Dev with Corona
Shawn Grimes
 

What's hot (19)

Providing the ultimate publishing experience
Providing the ultimate publishing experienceProviding the ultimate publishing experience
Providing the ultimate publishing experience
 
Wulin kungfu final
Wulin kungfu finalWulin kungfu final
Wulin kungfu final
 
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesSlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
 
Pokelabo flash 2013/4
Pokelabo flash 2013/4Pokelabo flash 2013/4
Pokelabo flash 2013/4
 
Automate devmachinesetup
Automate devmachinesetupAutomate devmachinesetup
Automate devmachinesetup
 
City Mouse Mobile - A Case Study
City Mouse Mobile - A Case StudyCity Mouse Mobile - A Case Study
City Mouse Mobile - A Case Study
 
Assignment D
Assignment DAssignment D
Assignment D
 
Sx sw speaker proposal slides
Sx sw speaker proposal slidesSx sw speaker proposal slides
Sx sw speaker proposal slides
 
Build the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-FrameBuild the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-Frame
 
What a web developer would like to have…
What a web developer would like to have…What a web developer would like to have…
What a web developer would like to have…
 
【Unite 2017 Tokyo】EditorVRの設計から学んだこと:使えるVRエディターのためのデザイン
【Unite 2017 Tokyo】EditorVRの設計から学んだこと:使えるVRエディターのためのデザイン【Unite 2017 Tokyo】EditorVRの設計から学んだこと:使えるVRエディターのためのデザイン
【Unite 2017 Tokyo】EditorVRの設計から学んだこと:使えるVRエディターのためのデザイン
 
Establishing Performance Contexts
Establishing Performance ContextsEstablishing Performance Contexts
Establishing Performance Contexts
 
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered St...
 
Sp Design
Sp DesignSp Design
Sp Design
 
Game development via_sprite_kit
Game development via_sprite_kitGame development via_sprite_kit
Game development via_sprite_kit
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
 
Making HTML5 Games with Phaser
Making HTML5 Games with PhaserMaking HTML5 Games with Phaser
Making HTML5 Games with Phaser
 
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
 
Cross Game Dev with Corona
Cross Game Dev with CoronaCross Game Dev with Corona
Cross Game Dev with Corona
 

Similar to Mirror - Android UI development on steroids

Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)
ColdFusionConference
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Salem Ghoweri
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
Wojtek Zając
 
Real World Lessons in jQuery Mobile
Real World Lessons in jQuery MobileReal World Lessons in jQuery Mobile
Real World Lessons in jQuery Mobile
Kai Koenig
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
climboid
 
Windows 8 app template feedback
Windows 8 app template feedbackWindows 8 app template feedback
Windows 8 app template feedback
Steren Giannini
 
UI Debugging - Cocoaheads Dresden (English)
UI Debugging - Cocoaheads Dresden (English)UI Debugging - Cocoaheads Dresden (English)
UI Debugging - Cocoaheads Dresden (English)
Pit Garbe
 
Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal
Hey Android, Mirror Mirror all day long - Yossi Elkrief, TikalHey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal
Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal
DroidConTLV
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentation
colberding
 
JSFoo-2017 Takeaways
JSFoo-2017 TakeawaysJSFoo-2017 Takeaways
JSFoo-2017 Takeaways
Mir Ali
 
BYOD: Build Your First VR Experience with Unreal Engine
BYOD: Build Your First VR Experience with Unreal EngineBYOD: Build Your First VR Experience with Unreal Engine
BYOD: Build Your First VR Experience with Unreal Engine
Michael Sheyahshe
 
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScript
FITC
 
Colorful world-of-visual-automation-testing-latest
Colorful world-of-visual-automation-testing-latestColorful world-of-visual-automation-testing-latest
Colorful world-of-visual-automation-testing-latest
Onur Baskirt
 
Building VR Applications For Google Cardboard
Building VR Applications For Google CardboardBuilding VR Applications For Google Cardboard
Building VR Applications For Google Cardboard
Mark Billinghurst
 
Adventures in cross platform ConnectJS / TiConnect 2014
Adventures in cross platform ConnectJS / TiConnect 2014Adventures in cross platform ConnectJS / TiConnect 2014
Adventures in cross platform ConnectJS / TiConnect 2014
Jason Kneen
 
Knockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockout
Andoni Arroyo
 
Introduction to Xamarin Forms
Introduction to Xamarin Forms Introduction to Xamarin Forms
Introduction to Xamarin Forms
Russ Fustino
 
GWT widget development
GWT widget developmentGWT widget development
GWT widget development
pgt technology scouting GmbH
 
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"
Fwdays
 
DroidCon TLV 2015 - Hey android, mirror mirror all day long
DroidCon TLV 2015 - Hey android, mirror mirror all day longDroidCon TLV 2015 - Hey android, mirror mirror all day long
DroidCon TLV 2015 - Hey android, mirror mirror all day long
Yossi Elkrief
 

Similar to Mirror - Android UI development on steroids (20)

Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
Real World Lessons in jQuery Mobile
Real World Lessons in jQuery MobileReal World Lessons in jQuery Mobile
Real World Lessons in jQuery Mobile
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
Windows 8 app template feedback
Windows 8 app template feedbackWindows 8 app template feedback
Windows 8 app template feedback
 
UI Debugging - Cocoaheads Dresden (English)
UI Debugging - Cocoaheads Dresden (English)UI Debugging - Cocoaheads Dresden (English)
UI Debugging - Cocoaheads Dresden (English)
 
Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal
Hey Android, Mirror Mirror all day long - Yossi Elkrief, TikalHey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal
Hey Android, Mirror Mirror all day long - Yossi Elkrief, Tikal
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentation
 
JSFoo-2017 Takeaways
JSFoo-2017 TakeawaysJSFoo-2017 Takeaways
JSFoo-2017 Takeaways
 
BYOD: Build Your First VR Experience with Unreal Engine
BYOD: Build Your First VR Experience with Unreal EngineBYOD: Build Your First VR Experience with Unreal Engine
BYOD: Build Your First VR Experience with Unreal Engine
 
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScript
 
Colorful world-of-visual-automation-testing-latest
Colorful world-of-visual-automation-testing-latestColorful world-of-visual-automation-testing-latest
Colorful world-of-visual-automation-testing-latest
 
Building VR Applications For Google Cardboard
Building VR Applications For Google CardboardBuilding VR Applications For Google Cardboard
Building VR Applications For Google Cardboard
 
Adventures in cross platform ConnectJS / TiConnect 2014
Adventures in cross platform ConnectJS / TiConnect 2014Adventures in cross platform ConnectJS / TiConnect 2014
Adventures in cross platform ConnectJS / TiConnect 2014
 
Knockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockout
 
Introduction to Xamarin Forms
Introduction to Xamarin Forms Introduction to Xamarin Forms
Introduction to Xamarin Forms
 
GWT widget development
GWT widget developmentGWT widget development
GWT widget development
 
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"
 
DroidCon TLV 2015 - Hey android, mirror mirror all day long
DroidCon TLV 2015 - Hey android, mirror mirror all day longDroidCon TLV 2015 - Hey android, mirror mirror all day long
DroidCon TLV 2015 - Hey android, mirror mirror all day long
 

More from Sylwester Madej

Continous UI testing with Espresso and Jenkins
Continous UI testing with Espresso and JenkinsContinous UI testing with Espresso and Jenkins
Continous UI testing with Espresso and Jenkins
Sylwester Madej
 
Implementacja Material Design na Android Lollipop i starszych - MTC 2015
Implementacja Material Design na Android Lollipop i starszych - MTC 2015Implementacja Material Design na Android Lollipop i starszych - MTC 2015
Implementacja Material Design na Android Lollipop i starszych - MTC 2015
Sylwester Madej
 
Android libs by Square - make your development a bit easier
Android libs by Square - make your development a bit easierAndroid libs by Square - make your development a bit easier
Android libs by Square - make your development a bit easier
Sylwester Madej
 
No more waiting for API - Android Stub Server
No more waiting for API - Android Stub ServerNo more waiting for API - Android Stub Server
No more waiting for API - Android Stub Server
Sylwester Madej
 
Practical Android Course Part III - REST API with AQuery, Preferences, Androi...
Practical Android Course Part III - REST API with AQuery, Preferences, Androi...Practical Android Course Part III - REST API with AQuery, Preferences, Androi...
Practical Android Course Part III - REST API with AQuery, Preferences, Androi...
Sylwester Madej
 
Practical Android Course Part I - Introduction, Activities (KNI)
Practical Android Course Part I - Introduction, Activities (KNI) Practical Android Course Part I - Introduction, Activities (KNI)
Practical Android Course Part I - Introduction, Activities (KNI)
Sylwester Madej
 

More from Sylwester Madej (6)

Continous UI testing with Espresso and Jenkins
Continous UI testing with Espresso and JenkinsContinous UI testing with Espresso and Jenkins
Continous UI testing with Espresso and Jenkins
 
Implementacja Material Design na Android Lollipop i starszych - MTC 2015
Implementacja Material Design na Android Lollipop i starszych - MTC 2015Implementacja Material Design na Android Lollipop i starszych - MTC 2015
Implementacja Material Design na Android Lollipop i starszych - MTC 2015
 
Android libs by Square - make your development a bit easier
Android libs by Square - make your development a bit easierAndroid libs by Square - make your development a bit easier
Android libs by Square - make your development a bit easier
 
No more waiting for API - Android Stub Server
No more waiting for API - Android Stub ServerNo more waiting for API - Android Stub Server
No more waiting for API - Android Stub Server
 
Practical Android Course Part III - REST API with AQuery, Preferences, Androi...
Practical Android Course Part III - REST API with AQuery, Preferences, Androi...Practical Android Course Part III - REST API with AQuery, Preferences, Androi...
Practical Android Course Part III - REST API with AQuery, Preferences, Androi...
 
Practical Android Course Part I - Introduction, Activities (KNI)
Practical Android Course Part I - Introduction, Activities (KNI) Practical Android Course Part I - Introduction, Activities (KNI)
Practical Android Course Part I - Introduction, Activities (KNI)
 

Mirror - Android UI development on steroids

  • 1. MIRROR – UI DEVELOPMENT ON STEROIDS
  • 2. ABOUT ME SYLWESTER MADEJ @smdremedy sylwester.madej@byoutline.com http://byoutline.com http://soldiersofmobile.com
  • 3. MY PROBLEMS (YOURS TOO?!) 1. UI REQUIRES LOTS OF WORK 2. TESING ON DEVICE / EMU IS PAIN 3. AS BUILD + DEPLOY IS SLOOOW (ONE THING ECLIPSE IS WINNING) 4. PREVIEW ON IS STATIC (WHEN IT WORKS) 5. F* WORD OF ANDROID (FRAGMENTATION)
  • 4. BEHOLD MIRROR “Mirror” = “no More compile-Install-Run to see youR UI changes On Real devices” ● http://jimulabs.com/ ● AS plugin + server on desktop + client on device ● Save 20+ seconds per change, hours per day ● New way to iterate your design ● Paid $79
  • 5. HOT SWAP YOUR RESOURCES ● Preview your Layout, Drawable, Animator, Styles, Assets, … ● Dynamic preview – test your animations, selectors, gestures ● Test your resources on multiple devices at once (VIDEO)
  • 6. SAMPLE DATA FTW! ● Meta data in directory „mirror” ● Add some XML to preview your layout with „real” data (no more mock adapters) ●Works out-of-the-box with texts, images and basic attributes ● Fill your ListView, GridView with data, even different layouts per item
  • 7. CUSTOM VIEWS - FINALLY ● Preview layouts with CustomViews ● Code is hot swapped on recompilation ● Use your custom attributes in sample data
  • 8. MIRROR.JS (PREVIEW) ● Provide behaviour for your Mirror screens in JS ● Feels like Jquery ● Great way to prototype your animations ● Combine animations: together, sequence, delay ● OnClick – start animations, link screens... ● Export your prototype to APK!
  • 9. LIVE DEMO ● https://github.com/jimulabs/mirror-samples
  • 10. BONUS: 90 day trial ● http://bit.ly/mirrorlodz
  • 11. Thank you SYLWESTER MADEJ @smdremedy sylwester.madej@byoutline.com http://byoutline.com http://soldiersofmobile.com