Download as PDF, PPTX
Uploaded byFITC
Designing True Cross-Platform Apps
The document discusses a development strategy by Isle of Code focused on using a single Ember app to render both desktop and mobile applications, leveraging the same codebase for multiple platforms. It highlights the importance of writing good code for mobile effectiveness, as well as managing reflows and understanding responsive design principles. Additionally, it covers challenges related to code complexity, performance issues, and optimization strategies for mobile environments.
More Related Content
Similar to Designing True Cross-Platform Apps
Designing True Cross-Platform Apps
- 2.
- 3. Isle of Code •Toronto + Chicago based development; • Focused on Ember/Cordova;
- 4. Our Goal • Aftera preamble; • Use a single Ember app, and render desktop + mobile; • Re-use the same Ember App for native applications;
- 5. • Using onecode base for multiple platforms; • vs. building custom code bases for each platform; • Also handle mobile desktop/web sizing;
- 6.
- 7.
- 8. Good Code ==Good Hybrid • Much of making effective mobile is simply writing good code. • Desktops let us be lazier;
- 9.
- 10. A note ondeviceready • You probably need to use it for any custom initializers; • Has special handling. Even if you register the handler after deviceready fires, it will still be triggered.
- 11.
- 12.
- 13.
- 14. • Bootstrap's .col-md-push-*and .col-md-pull-* classes are classic examples of using reflow design. Reflow utilizes floats and positioning to re-arrange portions of your DOM (in this case columns) for different viewport sizes. Reflow includes the use of classes like .offset-xs-6 to adjust margins and spacing. • Reorder design is similar to reflow, but it accomplished by using the CSS order property to alter the position of items displayed using flexbox for layout. Reorder is "cleaner" than reflow, but both suffer from significant browser layout and paint time performance issues • http://blog.isleofcode.com/modern-responsive-design/
- 15. Manage Reflows • “Reflowis the process by which the geometry of the layout engine's formatting objects are computed. The HTML formatting objects are called frames: a frame corresponds to the geometric information for (roughly) a single element in the content model; the frames are arranged into a hierarchy that parallels the containment hierarchy in the content model. A frame is rectangular, with width, height, and an offset from the parent frame that contains it.” • http://www-archive.mozilla.org/newlayout/doc/ reflow.html
- 16. What causes Reflow? •Resizing the browser window; • using JavaScript methods involving computed styles; • adding or removing elements from the DOM; and • changing an element's classes. • https://developers.google.com/speed/articles/ reflow
- 17. What causes reflow? •http://csstriggers.com
- 18.
- 19.
- 20. <link href="disabled.css" rel="stylesheet"disabled> • often end up downloading 2-3 sets of assets;
- 21.
- 24.
- 25.
- 27. Taps • Tap targetsshould be ~48px;
- 28.
- 30. Our components arethe same • We can re-use the same logic, routes & components. The templates are only visually different;
- 31.
- 32.
- 33. Media Queries • #of different css files matter? • # of media-queries matter? • Inline vs separate? • http://aaronjensen.github.io/media_query_test/
- 34. Problems • Expensive reflow; •Code gets confusing & hard to follow quickly; • Can’t do anything complex;
- 36.
- 38. Problems • Still hardto maintain; • Canonically don’t know where to find mobile vs desktop; • Components either need classes, or containers need selective classes; • We’re introducing a lot of complexity that is not needed;
- 39. • "fluid" onlyunderstands viewport boundaries, but often needs to know about the boundaries of some smaller container • "reveal" slows down renders by weighing down the DOM tree • "reflow" and "reorder" cause expensive layouts and paints. • "reveal", "reflow", and "reorder" can be hard to see and reason about. • "restructuring" is just as messy, and likely less performant. • layout CSS you can't see makes maintenance hard and adds a taxing mental overhead to every project developer. • layout CSS you can see (via layout classes) is overly verbose, and often difficult to wade through.
- 40. When looking atjust the layout, it differs the most.
- 42.
- 43.
- 44.
- 45.
- 46. • Ditches reflow& reorder patterns;
- 47.
- 48. Elements • screen: 100%width, min-height of 100vh; • page: 100vw & 100 vh; • fill / fill block: fills parent; • centered: • box: grows to match other items, but not container; • hbox/vbox: fills remaining space, align horizontal/ vertical
- 50.
- 51. Further Optimization • Inguaranteed mobile only environments, try not to download desktop assets; • Images can be resized per platform; • Use fingerprinting to expire older assets;