Obligatory Intro Slide… — on Twitter: @mbxtr & @nathansmith — UI Developers (caffeine 㱺 code) — We do UX/web/mobile stuff at — We have mixed feelings about HTML5
I BUILD THE LEGACY APPS OF TOMORROW! In all honesty… And hey, so do you. We’re creating software UI in a document language. It’s a wonder anything works.
http://j.mp/candy-crush-story Fun Fact: iOS game Candy Crush Saga makes $850,000 per day.* *Assuming this peak number, sustained over an entire calendar year, that’s annual revenue of $310,250,000.
http://finance.yahoo.com/q/is?s=amzn+income+statement&annual Fun Fact: Amazon’s revenue is roughly $167,378,082 per day.* *61B total revenue in 2012. After operating expenses of 45.9B, that’s a gross profit of approximately 15.1B.
http://en.wikipedia.org/wiki/Napoleon This quote is sometimes (mis?) attributed to Napoleon… “It is not enough that I succeed, everyone else must fail.” He said, as he reached for the phone in his pocket.
How we see the mobile landscape… Business Logic and Data Aggregation Approaches to Mobile Development Titanium JavaScript API Android, iOS Xamarin Cross-platform C# API Android, iOS, Windows Phone Native C#, Java, or Objective-C Android, Blackberry, iOS, Windows Phone, etc. PhoneGap HTML, CSS, JS Android, Blackberry, iOS, Windows Phone, etc. Responsive or Mobile Web App Multiple OS (browsers) Application Services API — JSON to/from XML, etc. AS/400 SQL Server Oracle PostgreSQL Web Development Native Development Java .NET PHP Python Ruby or or or or MySQL Node.js
*FPS = Frames per second. Most movies are 24 FPS. Video games aim for 60 FPS. When making an app, especially if not 100% native… It’s important to strive for 60 FPS* and avoid interactions that feel awkward, lest you fall into the “uncanny valley” of UX.
https://en.wikipedia.org/wiki/Uncanny_valley In case you are unfamiliar with the term “uncanny valley” The uncanny valley is a hypothesis in the field of human aesthetics which holds that when human app features look and move almost, but not exactly, like natural human beings native apps, it causes a response of revulsion among human observers.
http://phonegap.com How PhoneGap Works — It embeds a WebView in a native app — Native app gives access to OS API’s — All the UI is built via HTML/CSS — JavaScript handles everything else — The app wrapper compiles via… Xcode, Eclipse, Visual Studio, or “the cloud” 㱺 build.phonegap.com
http://phonegap.com Benefits of PhoneGap — It is “the web you already know” — Debugging via desktop browser — Access to device API’s (GPS, etc) — Strives to implement W3C specs — Camera API, etc. — Supports Windows Phone, too
http://phonegap.com Drawbacks of PhoneGap — WebView dependent on OS — “Browser” on old Android — IE on Windows Phone, etc. — Not as performant as “native” — Presupposes mad web skills — (Okay, maybe that’s a “pro”)
“Topcoat is a brand new open source CSS library designed to help developers build web apps with an emphasis on speed. It evolved from the Adobe design language developed for Brackets, Edge Reflow, and feedback from the PhoneGap app developer community.” — Brian LeRoux
http://appcelerator.com/titanium Drawbacks of Titanium — Slow apps… I end up using WebViews — Workflow: code, compile, rinse, repeat — It’s XML/JS, but no DOM traversal — No first-party way to test your code — Regression testing is difficult — Added file size, due to Ti framework — Non-transferrable support license — Can’t hand off to a coworker
Abstraction layers tend to be harder to debug than “native” languages: C#, Objective-C, or Java — when using an IDE such as Visual Studio, Xcode, Eclipse, or Android Studio. With “the web,” you have familiar developer tools, built into all major browsers.
http://xamarin.com Benefits of Xamarin — Speed… It compiles to native code — 1:1 mapping of native API’s to C# — Code reuse: Android, iOS, Windows — Visual IDE, lets designers see the UI — Big-name apps use it (Rdio, anyone?) — Transferrable support license
http://xamarin.com Drawbacks of Xamarin — Still need to learn the native API’s — Doesn’t abstract that away — Need to know C# (“pro” if you do) — Added file size, due to Mono framework — Commercial, has licensing fees
http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com Benefits of Native Development — Default OS look & feel (UI conventions) — Performance (“closer to the metal”) — Access to device hardware (GPS, etc) — Benefit from latest OS enhancements — Able to hire specialists in that area
http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com Drawbacks of Native Development — Tied to the particular OS you built for — Maintaining a multi OS team/skill-set — Keeping app in sync with OS updates — Having multiple devices for testing
http://www.dafont.com/idautomationhc39m.font A serendipitous use of HTML5 HTML5 Cant Do That Last year, we were anticipating writing a lot of JavaScript to generate a barcode for a mobile app. To my surprise, I found a barcode font: “IDAutomationHC39M.” What would’ve taken days was mere minutes, adjusting font-size.
How we see the mobile landscape (revised)… Business Logic and Data Aggregation Approaches to Mobile Development Titanium JavaScript API Android, iOS Xamarin Cross-platform C# API Android, iOS, Windows Phone Native C#, Java, or Objective-C Android, Blackberry, iOS, Windows Phone, etc. PhoneGap HTML, CSS, JS Android, Blackberry, iOS, Windows Phone, etc. Responsive or Mobile Web App Multiple OS (browsers) Application Services API — JSON to/from XML, etc. AS/400 SQL Server Oracle PostgreSQL Web Development Native Development Java .NET PHP Python Ruby or or or or MySQL Node.js X Uncanny valley
http://knockoutjs.com Highlights of Knockout.js — Model, View, View Model (MVVM) — Two-way data binding — If user interacts with page, you can — reflect these changes in your data — Declarative UI: in markup, not in JS — Observables: If data changes, UI updates
http://durandaljs.com Highlights of Durandal.js — Built on KO, picks up where it left off — Routing: based on changes to URL — View/state change transitions — Async data fetching, with Promises — Manage code modules with Require.js — Enforces consistent code structure
Below a certain width, the layout switches to a “mobile” view. The table rows & cells are display:block, and text from each is inserted as a label, preceding the data.
// In a real app, this data would potentially be dynamic. // But for the purposes of this demo, is hard-coded here. [ { "first_name": "Amy", "last_name": "Poehler", "character_first_name": "Leslie", "character_last_name": "Knope" }, { "first_name": "Nick", "last_name": "Offerman", "character_first_name": "Ron", "character_last_name": "Swanson" }, { "first_name": "Aziz", "last_name": "Ansari", "character_first_name": "Tom", "character_last_name": "Haverford" }, ... ]
// Extend KO array, to make it sortable ko.observableArray.fn.sort_by = function(key, reverse) { var self = this; self.sort(function(a, b) { var a_key = String(a[key]); var b_key = String(b[key]); var n, val; if (reverse) { n = a_key - b_key; val = !isNaN(n) ? n : b_key.localeCompare(a_key); } else { n = b_key - a_key; val = !isNaN(n) ? n : a_key.localeCompare(b_key); } return val; }); };
// APP.init.sort_by sort_by: function(key) { var event = 'click.sort_by'; var str = '.table-data th[data-key] a'; body.off(event).on(event, str, function(ev) { var el = $(this); var th = el.closest('th'); var th_other = th.siblings('th'); var key = th.attr('data-key'); var sort = th.attr('data-sort'); var asc = 'ascending'; var desc = 'descending'; var dir = asc; if (!sort || sort === asc) { dir = desc; } var reverse = dir !== asc; th.addClass(on).attr('data-sort', dir); th_other.removeClass(on).removeAttr('data-sort'); APP.data.sort_by(key, reverse); }); },
nathansmith
line_developers
.png){kind=icon}
pharma_x_tech
tammyeverts
saboyutaka
bonotake
imsaku
adavis
yosuke_furukawa
sheep_san_white
prashantspol
devopstaiwan
n1ru4l
robhawkes
jakevdp
ammeep
colly
carmenintech
davidbonilla
brianwarren
marcelosomers
bcantrill
trishagee
jlugia
revolveconf