SlideShare une entreprise Scribd logo
1  sur  11
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

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
 
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
 

Tendances (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
 

Similaire à Mirror - Android UI development on steroids

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
 
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
 
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
 

Similaire à 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
 

Plus de Sylwester Madej

Plus de 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