51

Designing True Cross-Platform Apps

  • Upload
    fitc

  • View
    172

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Designing True Cross-Platform Apps
Page 3: Designing True Cross-Platform Apps

Isle of Code

• Toronto + Chicago based development;

• Focused on Ember/Cordova;

Page 4: Designing True Cross-Platform Apps

Our Goal

• After a preamble;

• Use a single Ember app, and render desktop + mobile;

• Re-use the same Ember App for native applications;

Page 5: Designing True Cross-Platform Apps

• Using one code base for multiple platforms;

• vs. building custom code bases for each platform;

• Also handle mobile desktop/web sizing;

Page 6: Designing True Cross-Platform Apps

Wrapped Apps are everywhere

Page 7: Designing True Cross-Platform Apps

ember-cordovahttps://github.com/isleofcode/ember-cordova

Page 8: Designing True Cross-Platform Apps

Good Code == Good Hybrid

• Much of making effective mobile is simply writing good code.

• Desktops let us be lazier;

Page 9: Designing True Cross-Platform Apps

WKWebView

Page 10: Designing True Cross-Platform Apps

A note on deviceready

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

Page 11: Designing True Cross-Platform Apps

Smoke & Mirrorshttps://github.com/runspired/smoke-and-mirrors

Page 12: Designing True Cross-Platform Apps

Flexihttps://github.com/runspired/flexi

Page 13: Designing True Cross-Platform Apps

Responsive v Fluid

Page 14: Designing True Cross-Platform Apps

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

Page 15: Designing True Cross-Platform Apps

Manage Reflows• “Reflow is 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

Page 16: Designing True Cross-Platform Apps

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

Page 17: Designing True Cross-Platform Apps

What causes reflow?

• http://csstriggers.com

Page 18: Designing True Cross-Platform Apps

Use CSS Transforms

Page 19: Designing True Cross-Platform Apps

visibility:hidden

Page 20: Designing True Cross-Platform Apps

<link href="disabled.css" rel="stylesheet" disabled>

• often end up downloading 2-3 sets of assets;

Page 21: Designing True Cross-Platform Apps

TouchBase

Page 22: Designing True Cross-Platform Apps
Page 23: Designing True Cross-Platform Apps
Page 24: Designing True Cross-Platform Apps

Standard Ember Structure

Page 25: Designing True Cross-Platform Apps

Standard Ember Structure

Page 26: Designing True Cross-Platform Apps
Page 27: Designing True Cross-Platform Apps

Taps

• Tap targets should be ~48px;

Page 28: Designing True Cross-Platform Apps

Hammer Example

Page 29: Designing True Cross-Platform Apps
Page 30: Designing True Cross-Platform Apps

Our components are the same

• We can re-use the same logic, routes & components. The templates are only visually different;

Page 31: Designing True Cross-Platform Apps

Media Queries

Page 32: Designing True Cross-Platform Apps

media queries

Page 33: Designing True Cross-Platform Apps

Media Queries

• # of different css files matter?

• # of media-queries matter?

• Inline vs separate?

• http://aaronjensen.github.io/media_query_test/

Page 34: Designing True Cross-Platform Apps

Problems

• Expensive reflow;

• Code gets confusing & hard to follow quickly;

• Can’t do anything complex;

Page 35: Designing True Cross-Platform Apps
Page 36: Designing True Cross-Platform Apps

Same Problems

Page 37: Designing True Cross-Platform Apps
Page 38: Designing True Cross-Platform Apps

Problems• Still hard to 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;

Page 39: Designing True Cross-Platform Apps

• "fluid" only understands 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.

Page 40: Designing True Cross-Platform Apps

When looking at just the layout, it differs the most.

Page 41: Designing True Cross-Platform Apps
Page 42: Designing True Cross-Platform Apps

Layouts change. Components are fluid.

Page 43: Designing True Cross-Platform Apps

Flexi

Page 44: Designing True Cross-Platform Apps

desktop.hbs

Page 45: Designing True Cross-Platform Apps

mobile.hbs

Page 46: Designing True Cross-Platform Apps

• Ditches reflow & reorder patterns;

Page 47: Designing True Cross-Platform Apps

Already easier to follow

Page 48: Designing True Cross-Platform Apps

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

Page 49: Designing True Cross-Platform Apps
Page 50: Designing True Cross-Platform Apps

For Emberists: sustain

Page 51: Designing True Cross-Platform Apps

Further Optimization

• In guaranteed mobile only environments, try not to download desktop assets;

• Images can be resized per platform;

• Use fingerprinting to expire older assets;