Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Tuesday, September 10, 2013

Experiencing Sencha Touch: VW Dealer app

Sencha Touch, a high-performance HTML5 mobile application framework. We used Sencha to build an iPad application that allows Volkswagen field managers and dealers to show customers everything about VW cars.
Application features:
  • Work offline.
  • Update application data without reinstalling the app.
  • Support multiple events.
  • Capture customer information locally and upload to server later on.
  • Vehicle gallery and videos slide show.
  • Vehicle trim specs, color specs, technical specs, pricing.
  • Vehicle comparison. 
Since this app needs to work with iPad 1st generation, memory management became very important. We spent good amount of time to tweak the app to have small memory footprint. 

The app is being used at places with no wifi. When the application is installed, it downloads all data from a server and stored on the iPad using HTML5 local file system feature. App uses high quality gallery images, so using manifest method would exceed the browser storage limit.

The app itself has a version control built-in so every update is an incremental update instead of re-download all data again.

Customer data are stored on the app using Sencha store data model.

2013 Sep updates: Redesign user interface!











Monday, May 6, 2013

NodeJS and real time communication application

It is always fun to try out something new. This time I had time to create a prototype game that uses NodeJS server and PubNub API. Multiple players join the game to answer a movie trivial question. Whoever answer the question correctly first gets to control the movement of a real object remotely. Players that do not win can keep playing the game while the winner controls the real object. The server app keeps track of the winner, game status and the real object status. Making sure only one player has access to control the real object.

Tuesday, November 13, 2012

Scalable JavaScript Application Architecture

Went to Yahoo developer meetup last week. Nicholas Zakas was the speaker that talked about how to build a scalable javascript application. There are some key points I’d like to share.

First is the overall architecture diagram.




Nicholas mentioned loose coupling is important to make an application scalable.


A loosely coupled system is one in which each of its components has, or makes use of, little or no knowledge of the definitions of other separate components.
  • Only the base library knows which browser is being used. 
  • Only the application core knows which base library is being used 
  • Only the sandbox knows which application core is being used 
  • The modules know nothing except that the sandbox exists 
  • No part knows about the web application
The advantages of such system are
  • Multiple different applications can be created with the same framework. 
  • Each part can be tested separately. 
  • Replace any parts do not break the application. 

The following link is Nicholas’ full slides with some pseudocode
http://www.slideshare.net/nzakas/scalable-javascript-application-architecture-2012

Tuesday, June 26, 2012

Fresh and Easy Shop for Shools Admin Tool

This is one of my biggest .NET project and I am happy with the end result. This project has 12 database tables and 50 stored procedures. This application is completely Ajax and web services driven. I also used EJS Javascript template engine.

Main functionality including:
  1. Administrator activity log
  2. Find possible duplicate school records. This is done using Full-text search against school name and address
  3. Search schools
  4. Result pagination
  5. Update 1 or more schools at a time
  6. Add new school attributes
  7. Create and update admin users
  8. Multiple user level with different permissions
  9. Export school data to Excel 








Monday, March 19, 2012

How to debug Javascript in IE7

Most developers know Firebug which is a nice debugging tool for Firefox. When it comes to IEs, Microsoft has a better debugging tool for it. It is called Visual Web Developer Express. Many people think it is only for .NET development. I will show you how to do Javascript debugging using Visual Web Developer Express.
  1. Install Visual Web Developer Express. It is free. http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-web-developer-express
  2. Update some IE settings. Tools->Internet Options->Advanced. Uncheck "Disable script debugging". Check "Display a notification about every script error".
  3. Fire up Visual Web Developer Express and create a New Web Site.
  4. Run the new web site in debugging mode. (F5)
  5. At this point, IE is launched with the new web site in it.
  6. Type in the web page you want to debug into address bar.
  7. Switch back to Visual Web Developer Express and you should see all the Javascript files of the page are loaded under Solution Explorer.
  8. Double click on the Javascript file, set break points and start debugging. Use controls on the top to start, stop, step over, etc.

Saturday, October 6, 2007

I Am Legend iPhone widget



This widget is built using mootools Javascript framework, HTML and CSS.

http://iamlegend.warnerbros.com/iphone/