We’re hiring JavaScript savvy developers to join our team at projekt202. (You can talk to us after the presentation) An urgent (not desperate) announcement http://projekt202.com
Technology is cyclical. Good ideas are often “borrowed” and make their way to products from multiple vendors. http://engadget.com/photos/hp-envy-15-vs-the-macbook-pro
The one thing all these phones have in common (besides Angry Birds) is they all have decent web browsers. http://paulirish.com/2010/high-res-browser-icons
Mobile web trivia time… — PhoneGap on Windows Phone uses the IE9 engine (it is pretty good) — WebKit is the dominant rendering engine across most mobile devices — iOS, Android, Blackberry, webOS — Blackberry has one of the best WebKit-based browsers available
http://alistapart.com/articles/responsive-web-design Whither Responsive Web Design? Responsive web design using @media queries (with one codebase for all devices) typically works best for web “sites” (not apps). As a general rule of thumb, if your content can be read via RSS and still make sense, it is a good candidate for RWD.
Benefits of native development — Default OS look & feel (UI conventions) — Performance (“closer to the metal”) — Access to device hardware (GPS, etc) — App store/marketplace distribution — Benefit from latest OS enhancements
Drawbacks of native development — Tied to the particular OS you built for — Maintaining a multi OS team/skill-set — Dealing with app store approval process — Keeping app in sync with OS updates
LinkedIn’s iPad app is 95% HTML5 We did users studies in-house, and I don’t think people noticed a big difference. Nobody said, “Oh that’s native,” or “Oh, that’s web.” As long as we can make the experience fast enough, nobody can tell the difference. It still feels right. — Kiran Prasad http://venturebeat.com/2012/05/02/linkedin-ipad-app-engineering
Benefits of hybrid development — Common codebase for multiple OS’s — Access to device hardware (GPS, etc) — App store/marketplace distribution — Skills you already have (HTML, CSS, JS) — Potential code reuse in web site/app
Drawbacks of hybrid development — Build for lowest common denominator — 3rd party SDK’s might lag behind OS — Want to use feature X? Wait for an implementation in abstraction layer. — An abstraction layer can have bugs of its own. Have to determine if a bug is in your code, the abstraction layer, or OS.
Areas where Titanium shines — Native UI — Great for iOS, crapshoot on Android — Build for iOS, Android, and Blackberry — Some code reuse across platforms — Entirely JavaScript based — Uses CommonJS’s AMD approach — Except for WebView (HTML/CSS too)
Abstraction layers tend to be harder to debug than “native” languages — Objective-C, C#, or Java — whilst using an IDE such as Visual Studio, Xcode, or Eclipse. With “the web,” you have familiar browser-based desktop tools in Chrome, Firebug, or Opera Dragonfly.
Areas where PhoneGap shines — 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 7, too
— 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 How PhoneGap works
@font-face { font-family: 'Open Sans'; // For all good browsers, including IE9. src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff'), // For older IE, and Android default browser. url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'); } @font-face { font-family: 'Open Sans'; font-weight: bold; // For all good browsers, including IE9. src: url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), // For older IE, and Android default browser. url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'); } All modern browsers support *.woff or *.ttf
markup = $('#_template-list-item') .html() .replace(/\s\s+/g, ''); template = Handlebars.compile(markup); Where the magic of Handlebars happens Yes, this looks underwhelming. That’s the point. It’s code you don’t have to write yourself! :) http://host.sonspring.com/handlebbbars/assets/js/application.js
Underscore.js is a power tool for working with collections of objects and arrays… — Collections — sortBy — pluck — uniq — extend — flatten — each — filter — find — Utility functions — throttle — chain — times and much more!