Page tree
Skip to end of metadata
Go to start of metadata

Mobile application development consists of two parts, UI and Code. This guide explains some tips to handle the design of UI and architecture of your JavaScript Code while you are developing your application on Smartface.


UI Design Guideline

  • Use images in normal mode if possible. Stretched images will decrease the performance. Image folders are designed for this purpose.
  • For filled solid color backgrounds, do not use image objects. Use more lightweight objects such as a rectangle or a label. This effects performance remarkably on Android.
  • If Some UI objects need to be moved, scaled and re-positioned with the same behavior, put them in the same container.
  • Using containers is good for grouping objects. However over-grouping will result in using many containers inside each other, and this will result in overhead of calculating positions and decrease the performance.
  • In mobile phone application, user view does not contain many interactions and those can be simply shown with a page. Unlike the phones, tablets have a bigger surface and user can interact with more items. In those cases dialogs could be useful.
  • Dialogs have lower performance on the UI than a page. For example, if the application has a sliding left menu on a single page, it is better to put it in a container inside the page rather than a separate dialog.
  • TextBoxes shows keyboards when focused. For a better user experience, define return key action for every TextBox.
  • While positioning the objects, use percentage. If objects needs to be same physical size, you can use DP. Whenever a DP or pixel type is used, do not forget to set Anchor according to the design rules.

JavaScript Code Design Guideline

There are some design guidelines available on internet. For example Google has released a good document regarding Google JavaScript Style Guide. Here is a summary of guidelines combined from other sources and advises by the core developers of the Smartface. While using these guides, please consider the below points.

  • Avoid long code blocks inside the events. Long code causes long process and this will reduce the responsiveness of the application. Try to write as less as possible inside the events.
  • If there is a complex code inside a single event, or a function, try to divide it into separate functions. This will increase readability of the code and provide with more flexibility to changes in the code.
  • The Smartface has a single JavaScript context of application during run-time. During the Splash page, there is a context initiated that only splash page related content is available. When the splash page is finished, this context is removed from the RAM. The other code files share the same JavaScript context, so be careful while naming the objects and functions. The code blocks on page files are executed when they are loaded first time in the memory. During this time, a redefining variable or function may override the declaration of a Global entity or entities in other pages. Also it is good to keep during this time, a code block on a page file, for example a function declaration is not processed until the page is loaded, so do not call those functions or variables from other pages, locate these declarations in global.
  • JavaScript is a flexible language. It is possible to extend prototypes of primitive types. In order to this, place them all on the top of global page.
  • Group variables next to the prototype extending code.
  • Do not exclude declaration of variables. Variables are declared with "var" keyword, it is important to use it. Otherwise an assignment in a function block may change the value of a global variable.
  • Deleting or removing a property can be done with using "delete" keyword or assigning it to "undefined". Unless it is required to remove from the object property key values, do not use it. It is much more effort on JavaScript engine to change the number of properties defined for the object. Assign the property to "null" value if possible.
  • Use "JSON.parse" instead of eval, it's much safer.
  • Use "{ }" for object and "[ ]" for array declaration, instead of "new Object()", "new Array()".
  • While using objects, if the object is assigned to be displayed on the screen, define toString method for which text to display on screen.
  • For methods of the object types, it is better to declare them on prototypes.
  • For naming in general, use "functionNamesLikeThis", "variableNamesLikeThis", "ClassNamesLikeThis", "EnumNamesLikeThis", "methodNamesLikeThis", "CONSTANT_VALUES_LIKE_THIS", "", and "filenameslikethis.js".
  • JavaScript uses truly types for checking the condition in if statement is true or not. Use the following figure to see how they are truly type or not:

  • Use triple equal ( === ) to check object is the same for the other side of the operator. Triple equal runs faster. Triple equal also checks data types, double equal converts the type vice versa and this slows the performance of the execution. For primitive types ( Number, String Boolean, null & undefined ) using triple equal is strongly advised. The following two images show how the double equal and triple equal differs:

  • this” is a special keyword in JavaScript. It works the same as normal JavaScript behavior. Also "this" keyword can refer to the object in events what raises the event.
  • For the last and very important point to keep in mind: Smartface is not a browser based app development technology. So in JavaScript engine, in contrary to web browsers, Smartface does not support Document Object Model (DOM) and Browser functionality. Most of the examples or code libraries found on internet are written for web browsers. Those code blocks do not work if they are accessing to DOM or Browser objects.