A talk I was asked to give on the various options for building mobile applications / getting content onto mobile devices.
I chose to organize it as gradient surveying the spectrum from web to native, all the stuff in between. Unfortunately for native I've only had experience with iOS so I couldn't really speak towards the other platforms.
I do think that non native solutions can take care of 95% of the use cases, and this gap will only narrow as time goes on - I'm thinking back to early 2010 when cross platform SDKs like Appcelerator Titanium came onto the scene and how much has changed.
With “Introduction to Backbone.js” workshop by Tikal’s Oren Farhi, attendees will learn to develop web application using Backbone.js framework. In addition to the basics of Backbone.js, attendees will get familiar with Twitter’s Bootstrap and will finally, connect to a live feed and develop a full working backbone.js application.
With “Introduction to Backbone.js” workshop by Tikal’s Oren Farhi, attendees will learn to develop web application using Backbone.js framework. In addition to the basics of Backbone.js, attendees will get familiar with Twitter’s Bootstrap and will finally, connect to a live feed and develop a full working backbone.js application.
This gives a jump start to Backbone.js. The session would cover various topics like Introduction to backbone js / Why would you use Backbone js? / Dependencies for Backbone js. and Getting started with backbone MVC etc.
Does the world need another front-end JavaScript framework. Apparently it does. This is a presentation on the need for a mobile and desktop web framework, and one possible rebuilding of the wheel.
Flexible UI Components for a Multi-Framework WorldKevin Ball
Slides from Flexible UI Components talk given at Web Unleashed 2017
Build UI components that work seamlessly in every JavaScript Framework.
Your core UI elements shouldn’t have to be different for your marketing site than they are in your application just because the former uses jQuery while the latter is built using Angular or React.
Lessons learned from work on ZURB Foundation 7.
Npm, bower, Angular, jQuery, grunt, gulp, browserify, requirejs, ember, backbone, requirejs, amd .... thousands of micro frameworks, libraries and tools.
The question is how do you avoid getting lost within the jungle of modern JS frameworks, libraries and tools? How to be effective and actually deliver while every day there is a new cool framework or tool coming out and one of the developers in your team would love to try it. In production.
In this talk I will explain the right strategy for dealing with the rapid changes in JS landscape and choosing the right set of tools for doing the job.
Key takeaways:
Get to know which js tools/libraries works well together.
Which tools/libraries are not cool anymore and why?
How to deal with library/tool dependency conflicts?
How to find good quality tools and frameworks?
The Dark Side of Single Page ApplicationsDor Kalev
The story of all the pitfalls we had while transferring FTBpro.com from the good old web to a Backbone single page application... and all the great solutions we've came up with
Microservices with Apache Camel, Docker and Fabric8 v2Christian Posta
My talk from Red Hat Summit 2015 about the pros/cons of microservices, how integration is a strong requirement for doing distributed systems designs, and how open source projects like Apache Camel, Docker, Kubernetes, OpenShift and Fabric8 can help simplify and manage microservice environments
http://mnug.de/artikel/meetups/december2014
Scaffolding can be a great way to enable developers quickly in a way consistent with best practices employed by the community or your organization. Yeoman is a proven scaffolding tool for webapps that has been around since 2012 and now sports more than 6000 stars on GitHub. Even though its original focus used to be on supporting front-end development, it now features a considerable number of Node.js-related generators worth exploring. This talk will give a quick overview on the topic of scaffolding, explain what Yeoman is all about and show you how to make the best use of it.
An Overview of the Javascript Ecosystem in 2015. Slides from this talk given at San Diego Javascript on June 2: https://www.youtube.com/watch?v=CGkPsNyI07A
Learn Developing REST API in Node.js using LoopBack FrameworkMarudi Subakti
This slide has been presented by me (Marudi Tri Subakti) on event Monthly Meetup Facebook Developer Circle Malang (devc-mlg-meetup-201703.splashthat.com) at 26th March 2017
With great power, comes great responsive-ability web design.
Responsive web design (RWD) will be demystified. Believe it or not, it's more than just media queries, although those will be discussed. It starts with proper UI design and application architecture, and then the dive into CSS - but not too deep! You don't have to be an expert to do RWD, but it helps to have some idea of what you are doing.
This gives a jump start to Backbone.js. The session would cover various topics like Introduction to backbone js / Why would you use Backbone js? / Dependencies for Backbone js. and Getting started with backbone MVC etc.
Does the world need another front-end JavaScript framework. Apparently it does. This is a presentation on the need for a mobile and desktop web framework, and one possible rebuilding of the wheel.
Flexible UI Components for a Multi-Framework WorldKevin Ball
Slides from Flexible UI Components talk given at Web Unleashed 2017
Build UI components that work seamlessly in every JavaScript Framework.
Your core UI elements shouldn’t have to be different for your marketing site than they are in your application just because the former uses jQuery while the latter is built using Angular or React.
Lessons learned from work on ZURB Foundation 7.
Npm, bower, Angular, jQuery, grunt, gulp, browserify, requirejs, ember, backbone, requirejs, amd .... thousands of micro frameworks, libraries and tools.
The question is how do you avoid getting lost within the jungle of modern JS frameworks, libraries and tools? How to be effective and actually deliver while every day there is a new cool framework or tool coming out and one of the developers in your team would love to try it. In production.
In this talk I will explain the right strategy for dealing with the rapid changes in JS landscape and choosing the right set of tools for doing the job.
Key takeaways:
Get to know which js tools/libraries works well together.
Which tools/libraries are not cool anymore and why?
How to deal with library/tool dependency conflicts?
How to find good quality tools and frameworks?
The Dark Side of Single Page ApplicationsDor Kalev
The story of all the pitfalls we had while transferring FTBpro.com from the good old web to a Backbone single page application... and all the great solutions we've came up with
Microservices with Apache Camel, Docker and Fabric8 v2Christian Posta
My talk from Red Hat Summit 2015 about the pros/cons of microservices, how integration is a strong requirement for doing distributed systems designs, and how open source projects like Apache Camel, Docker, Kubernetes, OpenShift and Fabric8 can help simplify and manage microservice environments
http://mnug.de/artikel/meetups/december2014
Scaffolding can be a great way to enable developers quickly in a way consistent with best practices employed by the community or your organization. Yeoman is a proven scaffolding tool for webapps that has been around since 2012 and now sports more than 6000 stars on GitHub. Even though its original focus used to be on supporting front-end development, it now features a considerable number of Node.js-related generators worth exploring. This talk will give a quick overview on the topic of scaffolding, explain what Yeoman is all about and show you how to make the best use of it.
An Overview of the Javascript Ecosystem in 2015. Slides from this talk given at San Diego Javascript on June 2: https://www.youtube.com/watch?v=CGkPsNyI07A
Learn Developing REST API in Node.js using LoopBack FrameworkMarudi Subakti
This slide has been presented by me (Marudi Tri Subakti) on event Monthly Meetup Facebook Developer Circle Malang (devc-mlg-meetup-201703.splashthat.com) at 26th March 2017
With great power, comes great responsive-ability web design.
Responsive web design (RWD) will be demystified. Believe it or not, it's more than just media queries, although those will be discussed. It starts with proper UI design and application architecture, and then the dive into CSS - but not too deep! You don't have to be an expert to do RWD, but it helps to have some idea of what you are doing.
Mobile applications Development - Lecture 8
Anatomy of an HTML 5 mobile web app
PhoneGap
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP.
You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.
Designing for the web is no longer what it used to be.
The number of devices with web-browsing capabilities is
growing at an increasing speed.
RWD is an approach aimed to provide a solid viewing
experience for a multiple of screens with one set of code.
Web development is evolving at a breakneck speed every passing year. New website technologies are being discovered regularly as developers explore new ways of innovation.
To make it easier for you, I have analyzed the shifts across industries and created an ultimate list of some of the latest web development trends in 2022.
According to the International Telecommunication Union, at the end of 2011 there were more than 1 billion mobile‐broadband subscriptions worldwide! With more of your library users using mobile devices to access information they will assume that your library can be available from anywhere, at any time, and on most any device. Now is the time to be ready for this demand.
In this webinar:
- Explore some innovative library mobile website designs and see how they were built.
- Understand how HTML, CSS, and JavaScript work together to build mobile websites.
- Learn what a mobile framework is and why they are used.
- Provide some existing mobile services/apps that can be included in library-created mobile websites.
- Acquire best practices in mobile Web development from start to finish.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
2. Predominent mode of
consumption of web
content shifting to
mobile
So let’s see what’s going on
(targeted towards those coming from a web
development background)
3. WAYS to skin this cat
• Mobile website (one end)
• Regular website optimized for mobile – “responsive design”
• Native app emulation
• jQuery Mobile, Sencha Touch – still pure html/css/js
• Framework in one language, 100% bridges to native
• Appcelerator Titanium (JS), Adobe Flash Builder (AS)
• Hybrid: Native with plugin with a web view + bridge
• Phonegap
• Fully native (the other end)
• iOS, Android, WP7, Blackberry, etc.
4. Mobile website
• Notice any changes in the last couple of years?
• Slow webpages being replaced with mobile optimized ones
Different approaches:
4. Build separate site/use different presentation
• Separate application (m.facebook.com)
• User agent detection in HTTP request
5. Responsive Design
• Different styling for mobile and desktop
• Easier to maintain (same person different clothes)
• Separate stylesheets and/or use of @media queries to alter
styling based on screen size
• Can augment with viewpoint meta tags to control display
(later)
5. Before we jump in…
What’s the goal?
• Web app vs. website
• Webapp: Complex UI and/or frontend logic
• Facebook
• Twitter
• Extensive, diverse engagement
• Website: mainly content consumption
• New York Times
• TechCrunch
• Limited engagement
• Content consumption
• Commenting
7. Separate site/presenation
• HTTP request header includes User-Agent
• Mobile Safari: Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46
(KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3
• Internet Explorer 9: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64;
Trident/5.0)
• Can also detect client side in javascript
• navigator.userAgent
• Don’t worry, most frameworks have a library for this
• Now what?
• Have a reverse proxy route the request
• Decide to serve different view templates to different clients
• etc.
8. Media queries
• Allows you to alter style based on screen size and attributes
• Huge variety of screen resolutions
• http://stephanierieger.com/the-trouble-with-android
• Sites that aren’t that complex can rearrange, resize the main
building blocks
- @media all and (orientation:landscape)
- @media all and (orientation:portrait)
- @media screen and (min-width: 980px)
- @media screen and (max-width: 980px)
- @media screen and (max-width: 700px)
- @media screen and (max-width: 480px)
10. Example @media screen and (max-
width: 700px) {
#content { #content {
float: left width: auto;
width: 700px float: none;
Base Styles for
} }
regular viewing Smaller
#sidebar { #sidebar { Tablets
float: left width: auto;
width: 250px float: none;
} }
}
@media screen and (max- @media screen and (max-
width: 980px) { width: 480px) {
#content { #sidebar {
width: 65%; Fluid layout for width: <X>px
} devices with
}
#sidebar { reasonable width
#content { Phone/
width: 30%; width: <Y>px Min width
} }
} }
11. Queries work in links
<link rel=“stylesheet” type=“text/css” media=“only screen and
(max-width: 480px)” href=“/assets/phone_stylesheet.css”
Do you have to worry?
Probably not - CSS frameworks support it out of the box:
•Twitter Bootstrap
•Zurb Foundation
Also plenty of boilerpoint setups out there as a base
•http://github.com/malarkey/320andup
•http://www.getskeleton.com/
12. Managing the Pixels
• Device pixels vs. CSS pixels – pixel density
• iPhone/iPad Retina display is 2x density, so to
compensate they paint the page as if they were half the
size, and allow metadata to denote higher resolution
images…
• Device-pixel-ratio
• Retina display is 960x640 vs. 480x320 for older iPhone
• Therefore device-pixel-ratio is 2
• You guessed in, this can be included in media queries
• Client side accessible too
• window.devicePixelRatio (as with everything client side, check
compatibility)
• Device-aspect-ratio
• 16/9, 4/3
13. Viewport
• Constrains the width of the <html> element
• But mobile devices have small screens, so two:
• Layout viewport: total width of site
• Visual viewport: what you see on the screen
• This sets the visual viewport to have:
• Layout and visual width equal
• Disallows zooming
<meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1”>
Would want this for a site that’s supposed to look like an app
14. Special stuff
• In the desktop browser
• mailto:email@address.com will open default email client
• In the mobile browser
• tel:987654321
• sms:123456789
• Maps too:
• Android - geo:<coords>
• iOS – maps:<coords>
• Look at platform specific documentation
• Remember you can render differently based on user
agent!
15. Development Workflow
• Simplest: change your user agent, resize your browser window,
code and refresh page. Bam.
• Better: Firebug lite on the phone
• Javascript implementation of Firebug that’s embeddable
• Even Better: remote control
• Weinre (inspector)
• http://people.apache.org/~pmuellr/weinre/docs/latest
• Android Chrome USB debugging via Andoird Debug Bridge
• iOS6 supposed to have this capability as well
• Bottom line: watch the ‘waterfall’ of HTTP requests
• Browsers have a connection limit for concurrently
downloading resources
http://www.quicksmode.org/m/ - convenient link for feature detection
16. On Performance
• Services like webwait.com
• (or your own script/browser control)
• Hit the site multiple times and see how long it loads
• Blaze.io/mobile
• Web performance startup acquired by Akamai
• Ran last night for rpxcorp.com, didn’t work
• Cell towers
• Seconds of latency to establish initial connection
• Apps and websites can keep a connection open to
increase responsiveness
• http://www.stevesouders.com/blog/2011/09/21/making-a-mobile-conn
/
18. Frameworks
• jQuery Mobile
• Smaller (couple hundred kb minified)
• Markup based/declarative bindings (html5 data attributes)
• <div data-role=“page”>
• <div data-role=“listview”>
• Scripting down just like desktop jQuery
• Can use w/ Zepto.js
• document.querySelectorAll vs. jQuery IE6 support
• Sencha Touch
• A bit bigger (few hundred kb minified)
• Performent – transitions work nicely
• Unlike jQuery Mobile, full fledged Javascript framework
• Fanatical iOS UX emulation Ext.application({
• Company behind ExtJS library name: 'Sencha’,
launch: function() {
Ext.create(“Ext.tab.Panel”, {
tabBarPosition: ‘bottom’,
19. Bridge to native
• “Write once, deploy native code everywhere” approach
• One SDK to rule them all?
• Appcelerator Titanium platform
• Write javascript using their structure
• Embedded Javascript interpreter (Kroll) as a proxy to making
native calls
• Result is that the app is ‘bloated’ in size
• Easiest way to get cross platform – no native SDKs
• Also supports Windows Phone, Blackberry
• Tradeoff is restriction to using the API provided
• Historical Context: early 2010, pure web solution not really
viable
• Embedded Webviews both slow to load, and apps primarily
webapps were not allowed by Apple (I tried)
20. Hybrid: native SDK w/ web
• Phonegap
• In Apache Incubator program as Cordova
• Still use the native Android, iOS SDKs (other platforms
too)
• Implements FFI between browser javascript and native
• Since it is embedding a webview, free to write apps as
web apps (use jQuery Mobile, even Backbone.js)
• Good option for games: FB + mobile
• The FB version is essentially already the game
• Since it’s a plugin to the native SDK, allows access to
native code
• push notifications, iOS5/Android notification center
• Backgrounding code (to Background, to Foreground)
• Background execution (streaming music, prefetching
content, VOIP)
21. Aside: Why your
battery life sucks
• Apps are allowed to schedule code to run in the
background in separate thread from the UI event loop
• Push notifications wake up the phone periodically
• This all drains battery if you have tons of misbehaving
apps
• My theory: this is why iPhone didn’t ship with multitasking
• Can’t get around physics!
• Present battery tech has finite # of joules in it
• Li Ion batteries pretty much at the end of the road
• Technologies like Li Air not yet commercially viable
• Joules = amount of current you can draw * time * voltage
you’ll see a lot of batteries rated in watt-hours (W = VI)
22. Going Native (iOS)
• The Cocoa Touch framework
• Cocoa Touch is mobile version of Apple’s Cocoa
framework for building Applications on the desktop
• Virtually identical sans UI naming conventions
• Does this fit the majority of application use cases?
• Titanium can get you into all the app stores after all
• Phone Gap lets you make your web app and still write
native code
3. Platform control when mobile is your primary business
(Square isn’t going use Phone Gap)
4. Extensive graphics (IE OpenGL)
• Even this may change! (WebGL, O3D)
23. Objective-c points
Like C++, is a superset of C, so can link to C/C++ libraries
Xcode treats .m files as obj-c, .mm files as C++
• Obj-c is strongly typed, statically compile, dynamic dispatch
• Square brackets are message dispatch (like in any dynamic
languages – Ruby, Python, etc.)
• “.” syntax is a wrapper around this
• Dynamic = method callsites not bound at compile time
• Dynamic = errors like “undefined method blah on yada”
•Named method parameters are expressive:
• (void) takeA: (id)hammer andHitA: (id) nail
•Vs. method parameters:
• hammer.hit(nail)
• Hit_something(nail, hammer)
24. Memory management
• What allocates memory?
• Whenever you see the keywords new, copy, alloc
• Beware of third part library methods that create objects
• Obj-c has garbage collection, but it’s reference counting
• Obj-c 2.0 has ARC, iOS5 brought support to iOS
• Static and dynamic analysis tools
• Leaks instrument
• Scans through heap and traverses object graph, compares
the two to see what sections of memory don’t have
anything pointing to it
www.facebook.com/notes/ambert-ho/how-to-fix-memory-leaks-developing-iphone-ap
25. Programming
• Obj-c language has the notion of “protocols”
• Essentially mix between Java interface and abstract class
• Allows a contract between entities, with optional methods
• Like binding events in Javascript also evented
• A class that implements a protocol registers delegates
• So “application didFinishLaunching is actually a protocol
method of the <UIApplicationDelegate> protocol
• Hooks like:
• applicationDidBecomeActive (app went into foreground)
• applicationDidEnterBackground (you closed the app but
it’s still running)
• application:didReceiveRemoteNotification (hooks into
Apple push notification service)
• Foundation Framework has a notion of events that can be
subscribed to
• Called “notifications” – handled by a notification center
26. High Level Schpeel
• Event loop with hooks/callbacks
• protocols and delegates – more on that later
• Your browser works this way too
http://developer.apple.com/library/ios/#documentation/general/conceptual/Devpedia-C
27. Working in native
• Lower level access to functionality
• HTTP requests manually constructed (have to define
boundaries for multipart forms IE file uploads
• This is because HTTP is a text protocol, so binary data
has to be base64 encoded
• main() method just initializes the event loop
• In previous page, “application:DidFinishLaunching”
becomes your callback for the starting point of your app
• iOS is MVC, with Controllers (ViewControllers) managing
Views
28. Phonegap for example…
Phonegap initializes its view controller during the app launching
Phonegap’s View Controller talks to the view
(UIWebview)
29. Conclusion
What’s your needs?
•Content based – just do a mobile website
•Have an application – jQuery Mobile, Sencha Touch
•Need to just deploy everywhere native and have relatively
standard functionality - Titanium
•Complex application functionality – Phonegap
•You like pain – all native
• You must REALLY need all native
• Remember, Phonegap can co-exist w/ native code
• Phonegap + Sencha Touch/jQuery Mobile/Backbone.js
30. On the Horizon
Mozilla’s Boot 2 Gecko (B2G)
• Complete OS written with Javascript bindings to systems
level calls
• Like Node.js opened a door for JS developers to do server
side work, this *could* open floodgates for native
development
• Contracts signed with some major carriers
• We’ll have to wait and see…
Editor's Notes
There’s a whole gamut of different ways to put your “thing” onto someone’s mobile device. Continuum stretches from a plain website to fully native apps with lots in between With native I’ll focus on iOS since I only know that
A lot of sites have been redesigned to actually just work better on mobile It gets hard to maintain completely separate sites, especially if you’re trying to iterate or rip out and put in new features. This was the initial approach I took, ba big headache very quickly
Important distinction has to be made here – what’s the endgoal product functionality?
When a client is making an HTTP request, it sends metadata in the header, one of which is user-agent, indicating what type of browser it is. Differentiates both vendors and mobile/desktop You might have gone to a site on your phone and saw a popup “hey! Check our app in the appstore!” Well, this is how they do it
Flip a phone or tablet in landscape, lots of horizontal real estate so maybe you have a sidebar with navigation Then vertical, less horizontal real estate, maybe you want to cluster the navigation at the top
The point is that you can not only move things around, but apply all the other CSS properties (images, background, etc.) according to media queries
Fluid vs. Fixed: when you resize your browser you might have noticed that some site expand and collapse, others have this fixed width on a background, cuts off when you get too narrow In this case for > 980px when we’re talking about a desktop, we probably want to have a fixed width container centered (margin-left/right) in the middle of the page
Remember that mobile browsers need to look at pages that were designed for desktop Notice that if you go to some mobile websites you can’t zoom in and you can’t scroll right, or maybe scroll down – that’s because they’ve laid out the site to fit mobile devices and then set the viewport property in their HTML
Weinre is a Node.js application, you include some javascript from the server and point your phone to a website, then open a /client url on your desktop and you get to see what the phone sees. Cool stuff. Optimization around the HTTP request waterfall – all browsers have a cap on connections used to access resources (images, stylesheets, ajax calls) and this matters more on mobile
Your phone connects to the internet through many layers of indirection: cell tower, gateway, carrier internal routing, then out to internet Keeping the connection open (which drains battery) is an optimization I’m pretty sure a lot of realtime native apps (esp chat apps) use
The jQuery example is their “kitchen sink” – some frameworks will have “documentation for hackers” where they just expose a page with all the functionality for you to access
Things change so quickly in this space – Sencha Touch is commercially backed however (though it’s open source). ExtJS took the “ Mysql AB ” approach to open source It’s also different in that jQuery Mobile allows development pretty much the same as with jQuery on the desktop, plus the bindings Sencha is like Backbone.js – ExtJS had a structured all-JS dev framework too (some people like, some people hate, it’s all just a tool in the end) You’ll see Appcelerator Titanium is like this too
Concept of a webview: an instance of a browser spun up within a native app – more on the next slide
I polled game developer friends and this is the most popular way to do things at the moment
Joules for some of you – measure of energy, ability to produce one watt in a second. What’s a watt? The ability to expend a joule per second… So Joules = Amp hours * voltage you’ll see a lot of batteries rated in Amperage-hours *caught up with a friend who’s a battery expert doing due diligence, I know nothing of the emerging battery techs
Bad British joke, “The old boy’s gone native!” We mentioned earlier that web views were slow a couple of years ago. Maybe we’ll have faster browser graphics (Google I/O in 2009 demo’d O3D in browser rendering of a rich 3D landscape)
Obviously this is a big topic, so I’m going to just go through an overview and give confusion points coming from other languages, esp scripting languages
You can imagine all the objects in memory as a tree
Foundation is the non-GUI base libraries that date back to the NEXT computer days (Next Step)– hence a lot of stuff begins with “NS”: NSString, NSDictionary, NSArrat