Javascript Sprachraum on the server
Patrick Lee @boundvariable
How Javascript on server look like?
- Get ip address from server:
<SERVER>write(request.ip)</SERVER>
Resources
- Web directions South, Javascript Sprachraum
- Server side js environment
- aptana jaxer – the javascript server
- node.js: use v8 script http://nodejs.org/
- Coffee Script
Database
Testing javascript (server) with unit test
- vows
- kyuri (gherkin)
- nodeunit
Package management
- node package management npm: http://npmjs.org/
Build on node
- cake: coffee-script version
- jake: java script version
Server modules in js
- http://github.com/ry/node/wiki/modules over 500 modules
Sample
Location, location, geolocation
Max Wheeler @makenosound from Icelab
Resources
- Web directions South, Location, location, geolocation
- Geodesic: Location in longitude, latitude form
- Civic: Location in human understandable form e.g pub name
WOEIDs
- Where On Earth Identifiers (WOEIDs) unique identifier for place on earh (by yahoo)
- where.yahooapis.com/v1/place/URI
<?xml version="1.0" encoding="UTF-8"?>
<place yahoo:uri="http://where.yahooapis.com/v1/place/2507854" xml:lang="en">
<woeid>2507854</woeid>
<placeTypeName code="7">Town</placeTypeName>
<name>Trenton</name>
</place>
Data gathered from:
- GPS (assisted-GPS)
- cellular network id
- wifi networks
- IP sniffing
- manual input
Geolocation API
- not working in IE6-9 and safari 4
- navigator.geolocation –> using modernizr Modenizr.geolocation and get extra data
- one-shot request: get location of the user getCurrentPosition (successEvent, errorEvent, other optional params). errorEvent is optional
- watch position: continue watchin & update application the user location, only trigger position location. this will run forever, so we need to makesure we clearWatch to stop watching
- reverse geocoding: get long, lat and turn to address
- reverse geocoding: get address and turn in long, lat
- navigator.geolocation.getCurrentPosition –> will return: longitude, latitude, accuracy, altitude, altitudeAccuracy, heading (in degrees and use in compass in iphone, ipad), speed (how fast moving from point a to point b –> not really working well in mobile)
- Example code: With this anonymous function (function without name) and return array of latitude and longitude
navigation.geolocation.getCurrentPosition(function(location) {
return [location.coords.latitude, location.coords.longitude]
}
Sample:
- http://gowalla.com/
- decaf sucks: http://decafsucks.com
- tinygeocoder.com
- placefinder from yahoo
- google: using googlemap api
- http://code.google.com/apis/maps/articles/tutorial-iphone.html native geolocation API (iPhone)
YQLGEO
- a wrapper for geolocation services
- http://isithackday.com/hacks/geo/yql-geo-library
- If we deny position, it will do IP lookup and return the lat/long of that IP
NOTE:
- Use google direction API to show the direction on how to go to the location
- drawing map: try to use static map to avoid too much overhead in mobile
Building Mobile web apps
By Myles Eftos @madpilot
Resources:
Available mobile platform and the language used for the native applications
- iPhone: Objective C
- Anroid: Java
- Nokia: C++
- Win 7: .net
- Palm pre: html + css + js
Framework
- PhoneGap:
- Advantage:
- Webkit
- Add javascript bridge e.g. hardware devides like camera, geolocation, gmap
- All the mentioned phone above
- Fast to develop: using html + css + js
- deploy to appstore easily
- use existing development tools
- lifecycle like normal browser load html, css and js
- Use JQ unit test for unit testing
- iPhone, Google Android, Symbian, Palm and Blackberry
- Disadvantage:
- Slower than native apps
- can’t access everything yet
- no position:fixed support e.g. footer
- no debugger, but can use firebugs through computer
- file system support is limited
- Issue:
- memory + cpu are issue
- abritary of 10 mb image limit –> will stop loading if image too big (work for normal safari but not mobile safari)
- only handles text files
- working asynchronously is hard –> work on only 1 thread
- Advantage:
- Jquery JQTouch
- html + css + js library
- worth it for js application
- html + css –> clunky
- SenchaTouch (extjs, jqtouch, raphael): http://www.sencha.com/products/touch/
- extjs which is better for app dev
- better performance than jquery
- weird licence: it’s GPL but developer need to pay
- html + css + js
- iScroll 3.0
- Not a full framework
- fixed scrolling position –> use CSS3
- uncanny valley problem
- renamed to GhostTouch? –> but still in development
- Titanium by Appcelerator:
- Use this for developing different mobile platform native app (using native code)
- complies js down to bottom
- will loss the css3 + html5 look & view by styling using js
- develop on desktop
- Advantage:
- Make use as UI widget & perform at same speed as native app
- no crazy square bracket notation
- pretty good abstraction
- API:
- bigger API than Phonegap
- mainly generic but some platform specific
- threaded UI means file & db functions return synchronously
- Disadvantage:
- docs lack of sample (but the forum good)
- structuring code is less defined than on the web
- no debugger
- code-build-crash cycle much slower than code-refresh-cycle
- unit testing is hard
- iui: not working anymore, using predefined html to display the content like iphone
Native apps are faster than webkit mobile app dev (phonegap) because in webkit:
- image loading is slow
- rendering a gradient, makes an image (use canvas) and then convert to bmp before displaying
- accelerated animation (opacity, translate3d)
- use native touch event (slower than click event by 300 ms)
Pretending to go native
- html5 new form input like email, web than can switch keyboard layout
- turn on/off auto correction & auto capitalize (work for iPhone but not anroid)
- notification API provides alert & confirm (can set the title and the button vaue)
Conclusion
- Use Phonegap for better non-native UIs, fast prototyping, simple apps & web base app
- Use titanium for the rest
Working for mobile
- hardware acceleration: e.g. iphone (css animation)
- html5 offline-ness (manifest) e.g. reading gmail offline from iphone/ipad
- style: http://developer.apple.com/iphone/index.action –> using sdk and load iphone simulator, can switch iphone version (3, 4) or ipad. iphone 4 has a big graphic resolution that can’t fit in one screen –> can turn on debug screen to see the javascript error. apple dev site also provice human interface guidelines
Sample ipad/iphone application using html5 and javascript (not in appstore yet):
Raphaël: native web vector graphics library
with Dmitry Baranovskiy @dmitrybaranovsk