Filter
-
Content Type
-
Category
Mobile/Wearable
Visual Display
Digital Appliance
Platform
Recommendations
Filter
tutorials design, mobile, foldable
blogapp continuity and multi-window are key features of foldable smartphones. with app continuity, you can seamlessly go from the small screen to the large screen without the need to reopen the app that you were using. with multi-window, you can reply to an email in a pop-up window while using other apps and it is even easier to make dinner plans over text while checking your calendar. the large display is called the main display, while the inner small display is called the cover display. in this blog, we learn how to adapt these essential features in our app. figure 1: multi-window and pop-up window let us find out how much needs to be changed to take advantage of these features. app continuity moving an app between the two displays affects the size, density, and aspect ratio of the display it can use. moreover, your app data needs to be preserved during the transition to provide a seamless experience. this is what happens during the transition the activity is destroyed and recreated whenever the device is folded or unfolded. to implement this, app data needs to be stored and then used to restore the previous state. the app data can be stored in two ways. in this blog, we have stored the app data using the onsaveinstancestate() method of android. the other way is to use viewmodel which is shown in the blog how to update your apps for foldable displays. for our example, we have used an app, where we need to store the current score of two teams before the activity is destroyed so that we can restore the score when the activity is recreated after the screen transition (this sample app is provided at the end of this blog). we store the scores in a bundle inside onsaveinstancestate, using two key-value pairs. override fun onsaveinstancestate(outstate: bundle) { scoreview1 = findviewbyid(r.id.team1score) as textview scoreview2 = findviewbyid(r.id.team2score) as textview outstate.putstring("score1", tempscore1.tostring()) outstate.putstring("score2", tempscore2.tostring()) super.onsaveinstancestate(outstate) } we can check inside the oncreate function if the savedinstancestate is null. if it is null, then the activity has just been launched without a saved prior state. if it is not null, then we should retrieve the value from the savedinstancestate bundle and restore the value to the ui in order to provide an immersive experience to the users. if(savedinstancestate != null){ var text1: string? = savedinstancestate.getstring("score1") var text2: string? = savedinstancestate.getstring("score2") scoreview1?.text = text1 scoreview2?.text = text2 team1score = text1?.toint()!! team2score = text2?.toint()!! } demonstration app continuity figure 2: screen transition multi-window and multi-tasking another vital feature of foldable devices is multi-window. two or more apps can run in split-screen (multi-window) mode on the main display of foldable devices. users can create their own layouts with up to three app windows on the screen. pop-up view is another option, which lets you temporarily use another app without closing the current app, such as to quickly view a message while enjoying a movie. to implement these features, the developer needs to focus on responsive layout while designing their ui. to implement multi-window and enable multi-tasking, we need to use the following flags: screensize, smallestscreensize, and screenlayout. if you want to manually handle these changes in your app you must declare those flags values in the android:configchanges attributes. you can declare multiple configuration values in the attribute by separating them with a pipe (|) character. you can check out details for each value here. in addition, we need to set android:resizeableactivity as true, which allows the activity to be launched in split-screen and free-form (pop-up) modes. if the attribute is set to false, the activity does not support multi-window mode. <activity android:name=".mainactivity" android:configchanges="screensize|smallestscreensize|screenlayout" android:resizeableactivity="true"> demonstration multi-window figure 3: multi-window pop-up window figure 4: pop-up window sample app a sample app has been developed to illustrate how to implement app continuity and multi-window. in this app, a simple ui is designed to keep score of two teams playing a game. to adapt this app for foldable ui, some configurations have been changed by following the official guide. sample app - app continuity and multi-window (20.15mb) oct 18, 2021 conclusion foldable devices provide a richer experience than phones. to take advantage of the features of foldable devices, new form factors should be added to the app configuration. implementing app continuity enables users to enjoy uninterrupted experiences. and, with adjustable split-screen capabilities, users can enjoy up to three active windows simultaneously. if you have questions about developing for galaxy z devices, please visit our developer forums.
Md. Iqbal Hossain
Develop Smart Hospitality Display
docmovies and music link directly to detail pages in an application, such as an episode list link to an authentication or account login screen in addition, the personal preview can be used to link to personalized content, if the application is login-based link to the user's recently played content in the application importantthe preview must not be used to display third-party advertising or to advertise application features or capabilities content shown in smart hub preview belongs to the application and is the responsibility of the content provider section element specifications the following table defines the section element requirements category requirement notes number of sections 1 or more - number of tiles within a section section title optional long title text automatically scrolls across the title area the title must be in the system language table 1 section requirements tile element specifications the following table defines the tile element requirements category requirement number of tiles maximum 40 tiles deep-link url url must be unique thumbnail image mandatory format png or jpg file size maximum 360 kb height 250 pxtaller images are reduced to 250 px aspect ratio allowed ratios resolutions 16 9 444x250 px ~ 640x360 px 4 3 333x250 px ~ 480x360 px 1 1 250x250 px ~ 360x360 px 2 3 167x250 px ~ 240x360 px content image must be appropriate for viewers of all ages table 2 tile requirements the following figure shows the allowed thumbnail image aspect ratios optional elements can be shown when the user hovers on the tile title the title is shown in bold long title text automatically scrolls across the tile the title must be in the system language subtitle the subtitle is shown below the title long subtitle text automatically scrolls across the tile the subtitle must be in the system language "play" icon to indicate a deep link to media playback, you can show a "play" icon in the upper-right corner of the tile the following figure shows a tile with a title, a subtitle, and the "play" icon deep-link return key policy after the user enters the application through a deep link, the “return/exit” key click must be implemented to perform the following actions from a detail page within an application, clicking the “return/exit” key must display the previous page in the application from the home page of an application, clicking the “return/exit” key must terminate the application without any confirmation popup the user is returned to smart hub preview
Develop Smart TV
docmovies and music link directly to detail pages in an application, such as an episode list link to an authentication or account login screen in addition, the personal preview can be used to link to personalized content, if the application is login-based link to the user's recently played content in the application importantthe preview must not be used to display third-party advertising or to advertise application features or capabilities content shown in smart hub preview belongs to the application and is the responsibility of the content provider section element specifications the following table defines the section element requirements category requirement notes number of sections 1 or more - number of tiles within a section section title optional long title text automatically scrolls across the title area the title must be in the system language table 1 section requirements tile element specifications the following table defines the tile element requirements category requirement number of tiles maximum 40 tiles deep-link url url must be unique thumbnail image mandatory format png or jpg file size maximum 360 kb height 250 pxtaller images are reduced to 250 px aspect ratio allowed ratios resolutions 16 9 444x250 px ~ 640x360 px 4 3 333x250 px ~ 480x360 px 1 1 250x250 px ~ 360x360 px 2 3 167x250 px ~ 240x360 px content image must be appropriate for viewers of all ages table 2 tile requirements the following figure shows the allowed thumbnail image aspect ratios optional elements can be shown when the user hovers on the tile title the title is shown in bold long title text automatically scrolls across the tile the title must be in the system language subtitle the subtitle is shown below the title long subtitle text automatically scrolls across the tile the subtitle must be in the system language "play" icon to indicate a deep link to media playback, you can show a "play" icon in the upper-right corner of the tile the following figure shows a tile with a title, a subtitle, and the "play" icon deep-link return key policy after the user enters the application through a deep link, the “return/exit” key click must be implemented to perform the following actions from a detail page within an application, clicking the “return/exit” key must display the previous page in the application from the home page of an application, clicking the “return/exit” key must terminate the application without any confirmation popup the user is returned to smart hub preview
Develop Samsung Wallet
docmovies, entrances, others type value description payload object cardtemplate object required wallet card template object cardtemplate prtnrid string 32 required partner id cardtemplate templaterefid string 19 required partner template id cardtemplate title string 32 required wallet card name cardtemplate countrycode string 2 conditional the main headquarters location * required when creating a template cardtemplate cardtype string 100 conditional this value set “ticket”* required when creating a template cardtemplate subtype string 100 conditional select from these values performances, sports, movies, entrances, and others * required when creating a template cardtemplate prtnrapppckgname string 128 optional the application package name cardtemplate applogoimg string 200 optional the banner logo image url cardtemplate nonetworksupportyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate sharebuttonexposureyn string 1 optional this must be set to either 'y' or 'n' * default 'y' cardtemplate privacymodeyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate preventcaptureyn string 1 optional this value is a screen capture prevention flag that defines whether the content view prevents screen capture cardtemplate state string 15 optional wallet card's state* default 'draft' cardtemplate testingmodeoff string 1 optional testmode offeither 'y' or 'n'* default ‘n’available only when updating templates cardtemplate desc string 500 optional description { "cardtemplate" { "prtnrid" "4082825513190138240", "templaterefid" "2138240408282551314", "title" "wallet card title", "prtnrapppckgname" "prtnrapppckgname", "countrycode" "us", "desc" "desc", "cardtype" "ticket", "subtype" "entrances", "applogoimg" "http //www yourdomain com/banner_logo_image png", "nonetworksupportyn" "n", "sharebuttonexposureyn" "n", "privacymodeyn" "n", "preventcaptureyn" "n" } } -coupon card type coupon sub type others type value description payload object cardtemplate object required wallet card template object cardtemplate prtnrid string 32 required partner id cardtemplate templaterefid string 19 required partner template id cardtemplate title string 32 required wallet card name cardtemplate countrycode string 2 conditional the main headquarters location * required when creating a template cardtemplate cardtype string 100 conditional this value is set to “coupon” * required when creating a template cardtemplate subtype string 100 conditional this value is set to “others” * required when creating a template cardtemplate prtnrapppckgname string 128 optional the application package name cardtemplate applogoimg string 200 optional the banner logo image url cardtemplate nonetworksupportyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate sharebuttonexposureyn string 1 optional this must be set to either 'y' or 'n' * default 'y' cardtemplate privacymodeyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate preventcaptureyn string 1 optional this value is a screen capture prevention flag that defines whether the content view prevents screen capture cardtemplate state string 15 optional wallet card's state* default 'draft' cardtemplate testingmodeoff string 1 optional testmode off either 'y' or 'n'* default ‘n’available only when updating templates cardtemplate desc string 500 optional description { "cardtemplate" { "prtnrid" "4082825513190138240", "templaterefid" "2138240408282551313", "title" "wallet card title", "prtnrapppckgname" "prtnrapppckgname", "countrycode" "us", "desc" "desc", "cardtype" "coupon", "subtype" "others", "applogoimg" "http //www yourdomain com/banner_logo_image png", "nonetworksupportyn" "n", "sharebuttonexposureyn" "y", "privacymodeyn" "n", "preventcaptureyn" "n", } } -gift card card type giftcard sub type others type value description payload object cardtemplate object required wallet card template object cardtemplate prtnrid string 32 required partner id cardtemplate templaterefid string 19 required partner template id cardtemplate title string 32 required wallet card name cardtemplate countrycode string 2 conditional the main headquarters location * required when creating a template cardtemplate cardtype string 100 conditional this value is set to “giftcard” * required when creating a template cardtemplate subtype string 100 conditional this value is set to “others” * required when creating a template cardtemplate prtnrapppckgname string 128 optional the application package name cardtemplate applogoimg string 200 optional the banner logo image url cardtemplate nonetworksupportyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate sharebuttonexposureyn string 1 optional this must be set to either 'y' or 'n' * default 'y' cardtemplate privacymodeyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate preventcaptureyn string 1 optional this value is a screen capture prevention flag that defines whether the content view prevents screen capture cardtemplate state string 15 optional wallet card's state* default 'draft' cardtemplate testingmodeoff string 1 optional testmode off either 'y' or 'n'* default ‘n’available only when updating templates cardtemplate desc string 500 optional description { "cardtemplate" { "prtnrid" "4082825513190138240", "templaterefid" "2138240408282551315", "title" "wallet card title", "prtnrapppckgname" "prtnrapppckgname", "countrycode" "us", "desc" "desc", "cardtype" "gift", "subtype" "others", "applogoimg" "http //www yourdomain com/banner_logo_image png", "nonetworksupportyn" "n", "sharebuttonexposureyn" "y", "privacymodeyn" "n", "preventcaptureyn" "n", } } -loyalty card type loyalty sub type others type value description payload object cardtemplate object required wallet card template object cardtemplate prtnrid string 32 required partner id cardtemplate templaterefid string 19 required partner template id cardtemplate title string 32 required wallet card name cardtemplate countrycode string 2 conditional the main headquarters location * required when creating a template cardtemplate cardtype string 100 conditional this value is set to “loyalty” * required when creating a template cardtemplate subtype string 100 conditional this value is set to “others” * required when creating a template cardtemplate prtnrapppckgname string 128 optional the application package name cardtemplate applogoimg string 200 optional the banner logo image url cardtemplate nonetworksupportyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate sharebuttonexposureyn string 1 optional this must be set to either 'y' or 'n' * default 'y' cardtemplate privacymodeyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate preventcaptureyn string 1 optional this value is a screen capture prevention flag that defines whether the content view prevents screen capture cardtemplate state string 15 optional wallet card's state* default 'draft' cardtemplate testingmodeoff string 1 optional testmode off either 'y' or 'n'* default ‘n’available only when updating templates cardtemplate desc string 500 optional description { "cardtemplate" { "prtnrid" "4082825513190138240", "templaterefid" "2138240408282551316", "title" "wallet card title", "prtnrapppckgname" "prtnrapppckgname", "countrycode" "us", "desc" "desc", "cardtype" "loyalty", "subtype" "others", "applogoimg" "http //www yourdomain com/banner_logo_image png", "nonetworksupportyn" "n", "sharebuttonexposureyn" "n", "privacymodeyn" "n", "preventcaptureyn" "n" } } -id card card type idcard sub type employees, nationals, drivers, others type value description payload object cardtemplate object required wallet card template object cardtemplate prtnrid string 32 required partner id cardtemplate templaterefid string 19 required partner template id cardtemplate title string 32 required wallet card name cardtemplate countrycode string 2 conditional the main headquarters location * required when creating a template cardtemplate cardtype string 100 conditional this value is set to “idcard” * required when creating a template cardtemplate subtype string 100 conditional select from these values employees, nationals, drivers, and others * required when creating a template cardtemplate saveinserveryn string 2 optional this must be set to either 'y' or 'n' * default 'y' cardtemplate prtnrapppckgname string 128 optional the application package name cardtemplate applogoimg string 200 optional the banner logo image url cardtemplate nonetworksupportyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate sharebuttonexposureyn string 1 optional this must be set to either 'y' or 'n' * default 'y' cardtemplate privacymodeyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate preventcaptureyn string 1 optional this value is a screen capture prevention flag that defines whether the content view prevents screen capture cardtemplate state string 15 optional wallet card's state* default 'draft' cardtemplate testingmodeoff string 1 optional testmode off either 'y' or 'n'* default ‘n’available only when updating templates cardtemplate desc string 500 optional description { "cardtemplate" { "prtnrid" "4082825513190138240", "templaterefid" "2138240408282551317", "title" "wallet card title", "prtnrapppckgname" "prtnrapppckgname", "countrycode" "us", "desc" "desc", "cardtype" "idcard", "subtype" "employees", "applogoimg" "http //www yourdomain com/banner_logo_image png", "saveinserveryn" "y", "nonetworksupportyn" "n", "sharebuttonexposureyn" "y", "privacymodeyn" "n", "preventcaptureyn" "n" } } -pay as you go card type payasyougo sub type evcharges type value description payload object cardtemplate object required wallet card template object cardtemplate prtnrid string 32 required partner id cardtemplate templaterefid string 19 required partner template id cardtemplate title string 32 required wallet card name cardtemplate countrycode string 2 conditional the main headquarters location * required when creating a template cardtemplate cardtype string 100 conditional this value is set to “payasyougo” * required when creating a template cardtemplate subtype string 100 conditional this value is set to “evcharges” * required when creating a template cardtemplate prtnrapppckgname string 128 optional app package name cardtemplate applogoimg string 200 optional the banner logo image url cardtemplate nonetworksupportyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate sharebuttonexposureyn string 1 optional this must be set to either 'y' or 'n' * default 'y' cardtemplate privacymodeyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate preventcaptureyn string 1 optional this value is a screen capture prevention flag that defines whether the content view prevents screen capture cardtemplate state string 15 optional wallet card's state* default 'draft' cardtemplate testingmodeoff string 1 optional testmode offeither 'y' or 'n'* default ‘n’available only when updating templates cardtemplate desc string 500 optional description { "cardtemplate" { "prtnrid" "4082825513190138240", "templaterefid" "2138240408282551318", "title" "wallet card title", "prtnrapppckgname" "prtnrapppckgname", "countrycode" "us", "desc" "desc", "cardtype" "payasyougo", "subtype" "evcharges", "applogoimg" "http //www yourdomain com/banner_logo_image png", "nonetworksupportyn" "n", "sharebuttonexposureyn" "y", "privacymodeyn" "n", "preventcaptureyn" "n" } } -generic card card type generic sub type others type value description payload object cardtemplate object required wallet card template object cardtemplate prtnrid string 32 required partner id cardtemplate templaterefid string 19 required partner template id cardtemplate title string 32 required wallet card name cardtemplate countrycode string 2 conditional the main headquarters location * required when creating a template cardtemplate cardtype string 100 conditional this value is set to “generic” * required when creating a template cardtemplate subtype string 100 conditional this value is set to “others” * required when creating a template cardtemplate designtype string 100 optional select from these values “generic 01”, “generic 02”, “generic 03”* default “generic 01” cardtemplate prtnrapppckgname string 128 optional app package name cardtemplate applogoimg string 200 optional banner logo image url cardtemplate nonetworksupportyn string 1 optional either 'y' or 'n'* default 'n' cardtemplate privacymodeyn string 1 optional either 'y' or 'n'* default 'n' cardtemplate preventcaptureyn string 1 optional screen capture prevention flag cardtemplate category string 20 optional select from the following values “parking_pass”, “membership”, “reservations”, “insurance”, “health”, “receipt”, “coupon_stamp”, “note”, “photo”, and “others” cardtemplate state string 15 optional wallet card's state* default 'draft' cardtemplate testingmodeoff string 1 optional testmode offeither 'y' or 'n'* default ‘n’available only when updating templates cardtemplate desc string 500 optional description { "cardtemplate" { "prtnrid" "4082825513190138240", "templaterefid" "2138240408282551319", "title" "wallet card title", "prtnrapppckgname" "prtnrapppckgname", "countrycode" "us", "desc" "desc", "cardtype" "generic", "subtype" "others", "applogoimg" "http //www yourdomain com/banner_logo_image png", "designtype" "generic 02", "nonetworksupportyn" "n", "category" "membership", "privacymodeyn" "n", "preventcaptureyn" "n" } }
Develop Smart Hospitality Display
docmovies to display on the application home page ajax requests are dependent on the authorization step, because they must contain an authorization token wait for the data needed to render the home page, and render it this model is not optimized because the entire framework must be loaded and initialized before the application can start the authorization and content loading processes a possible approach to speeding up the launch process is by rebuilding the application in the following way divide the framework setup into 2 phases in the first phase, load the modules responsible for application authorization in the second phase, initialize the rest of the framework once the first phase is loaded, perform authorization immediately it is only dependent on the xhr object created in stage 1 during web runtime setup multiple ajax requests are merged into 1 request to avoid unnecessary delays the ajax request is dependent on the authorization step for the authorization token when the framework is fully initialized, begin performing the basic home page setup without waiting for the ajax request response stage 3 is eliminated completely by migrating the application from samsung legacy platform to tizen padding time is needed to synchronize the application logic and ajax requests the application logic requires ajax request data to render the home page, but as the requests are asynchronous, implement mechanisms to coordinate the modules, such as events, callbacks, and promises resume the application logic after receiving the response from the server load other parts of application logic, such as required scripts and data, on demand in this way, they do not delay the launch process this flow is more optimized, as many tasks are performed in parallel initially, the application loads only the modules which are necessary for authorization and starts authorization immediately along with other operations, such as loading the rest of the framework, the ui, resources, and content any tasks not required for displaying the home page are postponed to start after the launch process consequently, application launch time is much shorter than before improving launch time the following table lists optimization strategies that can improve application launch time, and the application launch stages they affect optimization stage 1 2 3 4 5 migrating application to tizen + + enabling prelaunch + + + + minimizing home page code + + loading js files asynchronously + + sending ajax requests promptly + + parallelizing ajax requests concatenating ajax requests + + + delaying platform and tizen api calls + + caching api output + + + using jquery 2 x or higher + + + loading static resources locally + + minimizing and concatenating code + + removing obsolete code + + using sprites + + + using pure css + + + enforcing gpu acceleration + table 2 launch stages affected by optimizations migrating application to tizen stages affected 1 and 3 tizen is more efficient than samsung legacy platform migrating the application from samsung legacy platform to tizen can improve its performance significantly enabling prelaunch stages affected 1, 2, 4, and 5 tv web applications in tizen support prelaunching applications can load in the background when the samsung tv is switched on when the user launches the application, it loads more quickly because it has been prelaunched for more information, see prelaunching applications minimizing home page code stages affected 2 and 5 application launch time can be improved by loading and parsing less code at launch when the application launches, load only the html, js, and css code necessary to show the home page other code can be loaded on demand using a library, such as require js, to avoid building and parsing the dom before it is needed loading javascript files asynchronously stages affected 2 and 4 when loading external javascript files normally, the html parser stops while the javascript files are downloaded and executed to avoid the pause in html parsing during download, you can use the defer and async attributes <script src='js/main js' defer></script> <script src='js/scripts js' async></script> using the defer attribute downloads the javascript file in parallel while parsing html the javascript code executes only when all html parsing is complete scripts using the defer attribute are guaranteed to execute in the same order that they appear in the document using the async attribute downloads the javascript file in parallel while parsing html, but when the download completes, the html parser pauses to execute the script the defer and async attributes can be used only for scripts implemented with the script element and src attribute for more information, see the html <script> element handling ajax requests you can improve launch time by optimizing ajax request usage sending ajax requests promptly stages affected 2 and 4 most applications load their content from remote servers and utilize a framework that helps manage the requests however, loading and executing the framework code can take a lot of time to speed up application launch, send the ajax requests needed to display the home page as soon as possible you can send a simple xhr request at the beginning of the "index html" file, before loading the framework xhr requests are asynchronous and do not block any other threads cache the response in a global object, so the application framework can use the data immediately to display the home page without sending the request again parallelizing ajax requests send ajax requests in parallel if they are not dependent on responses from prior requests before each request is executed after receiving a response from the previous one sendrequest1 onsuccess sendrequest2 onsuccess sendrequest3 onsuccess sendrequest4 onsuccess sendrequest5 after the first request authorizes the application after receiving the response, the other requests are executed asynchronously sendrequest1 onsuccess sendrequest2 sendrequest3 sendrequest4 sendrequest5 concatenating ajax requests stages affected 2, 4, and 5 limit the number of ajax requests by merging several requests, if possible the fewer requests there are, the less time it takes to process all of them for example, consider an application that sends 3 requests to display the home page, such as for application authorization, a list of recommended movies, and a list of the latest movies verify whether it is possible to modify the requests and backend in such a way that the response for the authorization request contains the recommended and latest movies as well you can also use this strategy throughout the application to reduce the loading time of other scenes delaying platform and tizen api calls stages affected 2 and 4 many applications make early calls to tizen and platform apis for static information, such as the duid or model code because api initialization is "lazy" the api is initialized only when it is first needed , the first call to each api module takes time postpone api calls until the application is fully started and ready to use, if possible caching api output stages affected 2, 4, and 5 instead of querying the api each time, cache the static output from product and tizen apis in javascript variables consider the following scenarios the total duration of video content is constant during video playback you can retrieve it once and store it in a javascript variable instead of querying the api each time it is needed tv specification parameters, such as the duid or model code, never change you can retrieve the parameters using the api the first time the application is launched and save it in localstorage retrieving data from localstorage is quicker than querying the api using jquery 2 x or higher stages affected 2, 4, and 5 newer versions of jquery are smaller and faster you can also consider using a custom jquery build loading static resources locally stages affected 2 and 4 load static application resources directly from the local file system, by including all application source code, external libraries, and static ui elements, such as css and images, within the tizen package before <link rel='stylesheet' href='https //maxcdn bootstrapcdn com/bootstrap/3 3 5/css/bootstrap min css'> <link rel='stylesheet' href='https //example com/myapp/css/styles min css'> <script src='http //code jquery com/jquery-2 0 0 min js'></script> <script src='https //maxcdn bootstrapcdn com/bootstrap/3 3 5/js/bootstrap min js'></script> after <link rel='stylesheet' href='css/bootstrap min css'> <link rel='stylesheet' href='css/styles min css'> <script src='js/jquery-2 0 0 min js'></script> <script src='js/bootstrap min js'></script> this not only decreases loading time, but can also improve application security and eliminate some application errors caused by network issues minimizing and concatenating code stages affected 2 and 4 the application loads faster when it makes fewer requests to the file system if you do not want to use a lazy loading mechanism to load parts of the application on demand, concatenate and minimize your source code, especially javascript and css files before <!doctype html> <html lang='en'> <head> <meta name='viewport' content='width=1280, user-scalable=no'> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <title>my application</title> <link rel='stylesheet' type='text/css' href='styles/main css'> <link rel='stylesheet' type='text/css' href='styles/list css'> <link rel='stylesheet' type='text/css' href='styles/player css'> <link rel='stylesheet' type='text/css' href='styles/login css'> <link rel='stylesheet' type='text/css' href='styles/account css'> <script src='js/main js'></script> <script src='js/list js'></script> <script src='js/player js'></script> <script src='js/login js'></script> <script src='js/account js'></script> </head> <body> <div id='menu'></div> <div id='maincontainer'> <div id='helpbar'></div> </body> </html> after<!doctype html> <html lang='en'> <head> <meta name='viewport' content='width=1280, user-scalable=no'> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <title>my application</title> <link rel='stylesheet' type='text/css' href='styles/all_styles css'/> <script src='js/all_scripts js' defer></script> </head> <body> <div id='menu'></div> <div id='maincontainer'> <div id='helpbar'></div> </body> </html> in some situations, it can be better to concatenate your code into 2 files instead of 1 if the code must be executed as soon as possible, put it into a file that is loaded with the async attribute if the code requires the dom to be ready before execution, put it in another file that is loaded with the defer attribute make sure that the code loads in the correct order to satisfy its dependencies removing obsolete code stages affected 2 and 4 if the application loads any unused source code, whether it is javascript, css, or html, the browser takes time to parse it, build the dom, and search the html code for matching css rules keep your code clean and up to date to avoid unnecessary performance issues caused by obsolete or redundant code for example, when the window onload method is called, calling the unregisterkey method of the tvinputdevice api is unnecessary because no keys are registered other than the default "left", "up", "right", "down", "enter", and "back" keys using sprites stages affected 2, 4, and 5 if your application loads many small graphics, such as icons, button elements, and backgrounds, consider using css sprites css sprites help images load faster by making fewer requests to the file system, which improves overall application performance you can merge all of the icons or background images into 1 large image and use css to set the positions for each element consider the following mouse hover implementation before #mybutton { width 300px; height 100px; background url 'img/button-normal png' 0px 0px no-repeat; } #mybutton hover { background url 'img/button-hover png' 0px 0px no-repeat; } this code is not optimal, as the browser must make 2 requests to the file system instead of 1 additionally, the first time the user hovers on the button, its background will flicker, as some time is needed to request the new image and show it on the screen after #mybutton { width 300px; height 100px; background url 'img/button-sprite png' 0px 0px no-repeat; } #mybutton hover { background url 'img/button-sprite png' 0px -100px no-repeat; } this code is more optimal because it loads only 1 image which takes less time to load, even though its size is bigger mouse hover changes only the background image position, so there is no flickering when switching between the states using pure css stages affected 2, 4, and 5 tizen supports css3, which allows you to create many graphic effects without using image files pure css renders faster and takes less time to calculate its properties, which is especially valuable when animating css elements the following code creates a button using only pure css button { width 180px; height 62px; line-height 62px; font-size 24px; color #fff; text-align center; text-shadow 1px 0 1px rgba 0, 0, 0, 75 ; background -webkit-linear-gradient top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100% ; border solid 2px #fff; border-radius 12px; box-shadow 0px 0px 15px 5px rgba 255, 255, 190, 75 ; } enforcing gpu acceleration stage affected 5 normally, the browser applies gpu acceleration when there is some indication that a dom element can benefit from it css3 allows you to force the browser to render elements with gpu acceleration one of the simplest methods is setting a style indicating 3d transform, even when no real 3d transformation is applied acceleratedelem { -webkit-transform translatez 0 ; } in general, 3d transformations in css force the browser to use the gpu the following declarations can reduce flickering during css transforms or animations acceleratedelem { -webkit-backface-visibility hidden; -webkit-perspective 1000; } for more information, see an introduction to css 3-d transforms and increase site performance with hardware-accelerated css optimizing javascript code follow a reliable and consistent coding standard and style for javascript, as it makes the code easier to write, easier to read, improves its maintainability, and makes it less error-prone the following section presents javascript best practices that are frequently used in the web community caching dom element references searching the dom tree is a resource-hungry operation if there are dom elements on which you perform operations frequently, store them in javascript variables to avoid repetitive dom traversal prefer var elem1 = document getelementbyid 'elem1' ; elem1 innerhtml = 'lorem ipsum dolor'; elem1 classlist remove 'class1' ; elem1 classlist add 'class2' ; var $elem2 = $ '#elem2' ; $elem2 html 'lorem ipsum dolor sit amet' ; $elem2 addclass 'class3' ; avoid document getelementbyid 'elem1' innerhtml = 'lorem ipsum dolor'; document getelementbyid 'elem1' classlist remove 'class1' ; document getelementbyid 'elem1' classlist add 'class2' ; $ '#elem2' html 'lorem ipsum dolor sit amet' ; $ '#elem2' addclass 'class3' ; it can be helpful to store references to frequently-used dom elements in a global object for example var domelementscache = { eldocument window document, elhtml window document documentelement, elbody window document body, elhead window document head, eltitle window document getelementbyid 'title' }; domelementscache eltitle innerhtml 'my title' ; avoiding slow jquery selectors jquery selectors work slower than native ones if application performance is critical, consider replacing jquery selectors, for example id selector //jquery var elem = $ '#myelem' ; //native js equivalent var elem = document queryselector '#myelem' ; class selector //jquery var elems = $ ' class1' ; //native js equivalent var elems = document queryselectorall ' class1' ; tagname selector //jquery var elems = $ 'span' ; //native js equivalent var elems = document queryselectorall 'span' ; $ find //jquery var elems = $el find ' target1, target2, target3' ; //native js equivalent var elems = el queryselectorall ' target1, target2, target3' ; using native methods native javascript methods are faster than wrappers from different libraries in some cases, it can be helpful to use them instead of library methods var myarray = [1, 2, 3]; //underscore _ each myarray, function val { console log val ; } ; //jquery $ each myarray, function val { console log val ; } ; //native js equivalent for var i = 0; i < myarray length; i++ { console log myarray[i] ; } removing console logging extensive logging decreases application performance, because each console log method call blocks the javascript thread in the browser other logging methods, such as the console warn , console info , console error methods, behave similarly to improve application performance, remove log methods in the final build you can use a logger utility to easily switch logging on and off open source libraries, such as woodman, are available, or you can write your own logger, such as the following example // global object for storing application configuration var applicationconfig = { debugmode true //enables logs in application }; // logger object factory var logger = function { var logger = {}; if applicationconfig debugmode === true { logger = { log function { var args = array prototype slice call arguments, 0 ; console log args ; }, info function { var args = array prototype slice call arguments, 0 ; console info args ; }, warn function { var args = array prototype slice call arguments, 0 ; console warn args ; }, error function { var args = array prototype slice call arguments, 0 ; console error args ; } }; } else { logger = { log function {}, info function {}, warn function {}, error function {} }; } return logger; }; // usage // for development and debugging var applicationconfig = { debugmode true }; var mylog = new logger ; // initializes logger mylog log 'test' ; // outputs 'test' to console //for production var applicationconfig = { debugmode false }; var mylog = new logger ; // initializes logger mylog log 'test' ; // does nothing importantnever override console log or any other native function overriding native objects is a bad practice in javascript, as it can lead to unexpected behavior and introduce defects that are very hard to debug optimization results the principles described in this guide were applied to several samsung tv applications, as listed in the following table optimization application a b c d e f migrating application to tizen + + + + + + enabling prelaunch + + + + + + minimizing home page code + + + + + + loading js files asynchronously + + + + + + sending ajax requests promptly + + + + parallelizing ajax requests + + + concatenating ajax requests + + delaying platform and tizen api calls + + + + + caching api output + + + + using jquery 2 x or higher + + + + loading static resources locally minimizing and concatenating code + + + + + + removing obsolete code + + + using sprites + + + + + + using pure css + enforcing gpu acceleration + caching dom element references + + + + + + avoiding slow jquery selectors + + + using native methods + + removing console logging + + + + + table 3 optimizations applied to samsung tv applications the following table lists the launch time optimization results application beforeoptimization afteroptimization reduction reduction % a 7 234 s 4 422 s 2 812 s 38 87% b 6 972 s 4 642 s 2 330 s 33 42% c 4 160 s 3 140 s 1 020 s 24 52% d 16 512 s 4 011 s 12 501 s 75 71% e 4 090 s 3 153 s 0 937 s 22 91% f 17 853 s 7 462 s 10 391 s 58 20% average reduction 4 999 s 42 27% table 4 results of application launch time optimization the average reduction in application launch time was almost 5 seconds, a 42% improvement this result suggests that it is worthwhile to optimize applications, wherever possible
Develop Smart TV
docmovies to display on the application home page ajax requests are dependent on the authorization step, because they must contain an authorization token wait for the data needed to render the home page, and render it this model is not optimized because the entire framework must be loaded and initialized before the application can start the authorization and content loading processes a possible approach to speeding up the launch process is by rebuilding the application in the following way divide the framework setup into 2 phases in the first phase, load the modules responsible for application authorization in the second phase, initialize the rest of the framework once the first phase is loaded, perform authorization immediately it is only dependent on the xhr object created in stage 1 during web runtime setup multiple ajax requests are merged into 1 request to avoid unnecessary delays the ajax request is dependent on the authorization step for the authorization token when the framework is fully initialized, begin performing the basic home page setup without waiting for the ajax request response stage 3 is eliminated completely by migrating the application from samsung legacy platform to tizen padding time is needed to synchronize the application logic and ajax requests the application logic requires ajax request data to render the home page, but as the requests are asynchronous, implement mechanisms to coordinate the modules, such as events, callbacks, and promises resume the application logic after receiving the response from the server load other parts of application logic, such as required scripts and data, on demand in this way, they do not delay the launch process this flow is more optimized, as many tasks are performed in parallel initially, the application loads only the modules which are necessary for authorization and starts authorization immediately along with other operations, such as loading the rest of the framework, the ui, resources, and content any tasks not required for displaying the home page are postponed to start after the launch process consequently, application launch time is much shorter than before improving launch time the following table lists optimization strategies that can improve application launch time, and the application launch stages they affect optimization stage 1 2 3 4 5 migrating application to tizen + + enabling prelaunch + + + + minimizing home page code + + loading js files asynchronously + + sending ajax requests promptly + + parallelizing ajax requests concatenating ajax requests + + + delaying platform and tizen api calls + + caching api output + + + using jquery 2 x or higher + + + loading static resources locally + + minimizing and concatenating code + + removing obsolete code + + using sprites + + + using pure css + + + enforcing gpu acceleration + table 2 launch stages affected by optimizations migrating application to tizen stages affected 1 and 3 tizen is more efficient than samsung legacy platform migrating the application from samsung legacy platform to tizen can improve its performance significantly enabling prelaunch stages affected 1, 2, 4, and 5 tv web applications in tizen support prelaunching applications can load in the background when the samsung tv is switched on when the user launches the application, it loads more quickly because it has been prelaunched for more information, see prelaunching applications minimizing home page code stages affected 2 and 5 application launch time can be improved by loading and parsing less code at launch when the application launches, load only the html, js, and css code necessary to show the home page other code can be loaded on demand using a library, such as require js, to avoid building and parsing the dom before it is needed loading javascript files asynchronously stages affected 2 and 4 when loading external javascript files normally, the html parser stops while the javascript files are downloaded and executed to avoid the pause in html parsing during download, you can use the defer and async attributes <script src='js/main js' defer></script> <script src='js/scripts js' async></script> using the defer attribute downloads the javascript file in parallel while parsing html the javascript code executes only when all html parsing is complete scripts using the defer attribute are guaranteed to execute in the same order that they appear in the document using the async attribute downloads the javascript file in parallel while parsing html, but when the download completes, the html parser pauses to execute the script the defer and async attributes can be used only for scripts implemented with the script element and src attribute for more information, see the html <script> element handling ajax requests you can improve launch time by optimizing ajax request usage sending ajax requests promptly stages affected 2 and 4 most applications load their content from remote servers and utilize a framework that helps manage the requests however, loading and executing the framework code can take a lot of time to speed up application launch, send the ajax requests needed to display the home page as soon as possible you can send a simple xhr request at the beginning of the "index html" file, before loading the framework xhr requests are asynchronous and do not block any other threads cache the response in a global object, so the application framework can use the data immediately to display the home page without sending the request again parallelizing ajax requests send ajax requests in parallel if they are not dependent on responses from prior requests before each request is executed after receiving a response from the previous one sendrequest1 onsuccess sendrequest2 onsuccess sendrequest3 onsuccess sendrequest4 onsuccess sendrequest5 after the first request authorizes the application after receiving the response, the other requests are executed asynchronously sendrequest1 onsuccess sendrequest2 sendrequest3 sendrequest4 sendrequest5 concatenating ajax requests stages affected 2, 4, and 5 limit the number of ajax requests by merging several requests, if possible the fewer requests there are, the less time it takes to process all of them for example, consider an application that sends 3 requests to display the home page, such as for application authorization, a list of recommended movies, and a list of the latest movies verify whether it is possible to modify the requests and backend in such a way that the response for the authorization request contains the recommended and latest movies as well you can also use this strategy throughout the application to reduce the loading time of other scenes delaying platform and tizen api calls stages affected 2 and 4 many applications make early calls to tizen and platform apis for static information, such as the duid or model code because api initialization is "lazy" the api is initialized only when it is first needed , the first call to each api module takes time postpone api calls until the application is fully started and ready to use, if possible caching api output stages affected 2, 4, and 5 instead of querying the api each time, cache the static output from product and tizen apis in javascript variables consider the following scenarios the total duration of video content is constant during video playback you can retrieve it once and store it in a javascript variable instead of querying the api each time it is needed tv specification parameters, such as the duid or model code, never change you can retrieve the parameters using the api the first time the application is launched and save it in localstorage retrieving data from localstorage is quicker than querying the api using jquery 2 x or higher stages affected 2, 4, and 5 newer versions of jquery are smaller and faster you can also consider using a custom jquery build loading static resources locally stages affected 2 and 4 load static application resources directly from the local file system, by including all application source code, external libraries, and static ui elements, such as css and images, within the tizen package before <link rel='stylesheet' href='https //maxcdn bootstrapcdn com/bootstrap/3 3 5/css/bootstrap min css'> <link rel='stylesheet' href='https //example com/myapp/css/styles min css'> <script src='http //code jquery com/jquery-2 0 0 min js'></script> <script src='https //maxcdn bootstrapcdn com/bootstrap/3 3 5/js/bootstrap min js'></script> after <link rel='stylesheet' href='css/bootstrap min css'> <link rel='stylesheet' href='css/styles min css'> <script src='js/jquery-2 0 0 min js'></script> <script src='js/bootstrap min js'></script> this not only decreases loading time, but can also improve application security and eliminate some application errors caused by network issues minimizing and concatenating code stages affected 2 and 4 the application loads faster when it makes fewer requests to the file system if you do not want to use a lazy loading mechanism to load parts of the application on demand, concatenate and minimize your source code, especially javascript and css files before <!doctype html> <html lang='en'> <head> <meta name='viewport' content='width=1280, user-scalable=no'> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <title>my application</title> <link rel='stylesheet' type='text/css' href='styles/main css'> <link rel='stylesheet' type='text/css' href='styles/list css'> <link rel='stylesheet' type='text/css' href='styles/player css'> <link rel='stylesheet' type='text/css' href='styles/login css'> <link rel='stylesheet' type='text/css' href='styles/account css'> <script src='js/main js'></script> <script src='js/list js'></script> <script src='js/player js'></script> <script src='js/login js'></script> <script src='js/account js'></script> </head> <body> <div id='menu'></div> <div id='maincontainer'> <div id='helpbar'></div> </body> </html> after<!doctype html> <html lang='en'> <head> <meta name='viewport' content='width=1280, user-scalable=no'> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <title>my application</title> <link rel='stylesheet' type='text/css' href='styles/all_styles css'/> <script src='js/all_scripts js' defer></script> </head> <body> <div id='menu'></div> <div id='maincontainer'> <div id='helpbar'></div> </body> </html> in some situations, it can be better to concatenate your code into 2 files instead of 1 if the code must be executed as soon as possible, put it into a file that is loaded with the async attribute if the code requires the dom to be ready before execution, put it in another file that is loaded with the defer attribute make sure that the code loads in the correct order to satisfy its dependencies removing obsolete code stages affected 2 and 4 if the application loads any unused source code, whether it is javascript, css, or html, the browser takes time to parse it, build the dom, and search the html code for matching css rules keep your code clean and up to date to avoid unnecessary performance issues caused by obsolete or redundant code for example, when the window onload method is called, calling the unregisterkey method of the tvinputdevice api is unnecessary because no keys are registered other than the default "left", "up", "right", "down", "enter", and "back" keys using sprites stages affected 2, 4, and 5 if your application loads many small graphics, such as icons, button elements, and backgrounds, consider using css sprites css sprites help images load faster by making fewer requests to the file system, which improves overall application performance you can merge all of the icons or background images into 1 large image and use css to set the positions for each element consider the following mouse hover implementation before #mybutton { width 300px; height 100px; background url 'img/button-normal png' 0px 0px no-repeat; } #mybutton hover { background url 'img/button-hover png' 0px 0px no-repeat; } this code is not optimal, as the browser must make 2 requests to the file system instead of 1 additionally, the first time the user hovers on the button, its background will flicker, as some time is needed to request the new image and show it on the screen after #mybutton { width 300px; height 100px; background url 'img/button-sprite png' 0px 0px no-repeat; } #mybutton hover { background url 'img/button-sprite png' 0px -100px no-repeat; } this code is more optimal because it loads only 1 image which takes less time to load, even though its size is bigger mouse hover changes only the background image position, so there is no flickering when switching between the states using pure css stages affected 2, 4, and 5 tizen supports css3, which allows you to create many graphic effects without using image files pure css renders faster and takes less time to calculate its properties, which is especially valuable when animating css elements the following code creates a button using only pure css button { width 180px; height 62px; line-height 62px; font-size 24px; color #fff; text-align center; text-shadow 1px 0 1px rgba 0, 0, 0, 75 ; background -webkit-linear-gradient top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100% ; border solid 2px #fff; border-radius 12px; box-shadow 0px 0px 15px 5px rgba 255, 255, 190, 75 ; } enforcing gpu acceleration stage affected 5 normally, the browser applies gpu acceleration when there is some indication that a dom element can benefit from it css3 allows you to force the browser to render elements with gpu acceleration one of the simplest methods is setting a style indicating 3d transform, even when no real 3d transformation is applied acceleratedelem { -webkit-transform translatez 0 ; } in general, 3d transformations in css force the browser to use the gpu the following declarations can reduce flickering during css transforms or animations acceleratedelem { -webkit-backface-visibility hidden; -webkit-perspective 1000; } for more information, see an introduction to css 3-d transforms and increase site performance with hardware-accelerated css optimizing javascript code follow a reliable and consistent coding standard and style for javascript, as it makes the code easier to write, easier to read, improves its maintainability, and makes it less error-prone the following section presents javascript best practices that are frequently used in the web community caching dom element references searching the dom tree is a resource-hungry operation if there are dom elements on which you perform operations frequently, store them in javascript variables to avoid repetitive dom traversal prefer var elem1 = document getelementbyid 'elem1' ; elem1 innerhtml = 'lorem ipsum dolor'; elem1 classlist remove 'class1' ; elem1 classlist add 'class2' ; var $elem2 = $ '#elem2' ; $elem2 html 'lorem ipsum dolor sit amet' ; $elem2 addclass 'class3' ; avoid document getelementbyid 'elem1' innerhtml = 'lorem ipsum dolor'; document getelementbyid 'elem1' classlist remove 'class1' ; document getelementbyid 'elem1' classlist add 'class2' ; $ '#elem2' html 'lorem ipsum dolor sit amet' ; $ '#elem2' addclass 'class3' ; it can be helpful to store references to frequently-used dom elements in a global object for example var domelementscache = { eldocument window document, elhtml window document documentelement, elbody window document body, elhead window document head, eltitle window document getelementbyid 'title' }; domelementscache eltitle innerhtml 'my title' ; avoiding slow jquery selectors jquery selectors work slower than native ones if application performance is critical, consider replacing jquery selectors, for example id selector //jquery var elem = $ '#myelem' ; //native js equivalent var elem = document queryselector '#myelem' ; class selector //jquery var elems = $ ' class1' ; //native js equivalent var elems = document queryselectorall ' class1' ; tagname selector //jquery var elems = $ 'span' ; //native js equivalent var elems = document queryselectorall 'span' ; $ find //jquery var elems = $el find ' target1, target2, target3' ; //native js equivalent var elems = el queryselectorall ' target1, target2, target3' ; using native methods native javascript methods are faster than wrappers from different libraries in some cases, it can be helpful to use them instead of library methods var myarray = [1, 2, 3]; //underscore _ each myarray, function val { console log val ; } ; //jquery $ each myarray, function val { console log val ; } ; //native js equivalent for var i = 0; i < myarray length; i++ { console log myarray[i] ; } removing console logging extensive logging decreases application performance, because each console log method call blocks the javascript thread in the browser other logging methods, such as the console warn , console info , console error methods, behave similarly to improve application performance, remove log methods in the final build you can use a logger utility to easily switch logging on and off open source libraries, such as woodman, are available, or you can write your own logger, such as the following example // global object for storing application configuration var applicationconfig = { debugmode true //enables logs in application }; // logger object factory var logger = function { var logger = {}; if applicationconfig debugmode === true { logger = { log function { var args = array prototype slice call arguments, 0 ; console log args ; }, info function { var args = array prototype slice call arguments, 0 ; console info args ; }, warn function { var args = array prototype slice call arguments, 0 ; console warn args ; }, error function { var args = array prototype slice call arguments, 0 ; console error args ; } }; } else { logger = { log function {}, info function {}, warn function {}, error function {} }; } return logger; }; // usage // for development and debugging var applicationconfig = { debugmode true }; var mylog = new logger ; // initializes logger mylog log 'test' ; // outputs 'test' to console //for production var applicationconfig = { debugmode false }; var mylog = new logger ; // initializes logger mylog log 'test' ; // does nothing importantnever override console log or any other native function overriding native objects is a bad practice in javascript, as it can lead to unexpected behavior and introduce defects that are very hard to debug optimization results the principles described in this guide were applied to several samsung tv applications, as listed in the following table optimization application a b c d e f migrating application to tizen + + + + + + enabling prelaunch + + + + + + minimizing home page code + + + + + + loading js files asynchronously + + + + + + sending ajax requests promptly + + + + parallelizing ajax requests + + + concatenating ajax requests + + delaying platform and tizen api calls + + + + + caching api output + + + + using jquery 2 x or higher + + + + loading static resources locally minimizing and concatenating code + + + + + + removing obsolete code + + + using sprites + + + + + + using pure css + enforcing gpu acceleration + caching dom element references + + + + + + avoiding slow jquery selectors + + + using native methods + + removing console logging + + + + + table 3 optimizations applied to samsung tv applications the following table lists the launch time optimization results application beforeoptimization afteroptimization reduction reduction % a 7 234 s 4 422 s 2 812 s 38 87% b 6 972 s 4 642 s 2 330 s 33 42% c 4 160 s 3 140 s 1 020 s 24 52% d 16 512 s 4 011 s 12 501 s 75 71% e 4 090 s 3 153 s 0 937 s 22 91% f 17 853 s 7 462 s 10 391 s 58 20% average reduction 4 999 s 42 27% table 4 results of application launch time optimization the average reduction in application launch time was almost 5 seconds, a 42% improvement this result suggests that it is worthwhile to optimize applications, wherever possible
Develop Smart Signage
docmovies to display on the application home page ajax requests are dependent on the authorization step, because they must contain an authorization token wait for the data needed to render the home page, and render it this model is not optimized because the entire framework must be loaded and initialized before the application can start the authorization and content loading processes a possible approach to speeding up the launch process is by rebuilding the application in the following way divide the framework setup into 2 phases in the first phase, load the modules responsible for application authorization in the second phase, initialize the rest of the framework once the first phase is loaded, perform authorization immediately it is only dependent on the xhr object created in stage 1 during web runtime setup multiple ajax requests are merged into 1 request to avoid unnecessary delays the ajax request is dependent on the authorization step for the authorization token when the framework is fully initialized, begin performing the basic home page setup without waiting for the ajax request response stage 3 is eliminated completely by migrating the application from samsung legacy platform to tizen padding time is needed to synchronize the application logic and ajax requests the application logic requires ajax request data to render the home page, but as the requests are asynchronous, implement mechanisms to coordinate the modules, such as events, callbacks, and promises resume the application logic after receiving the response from the server load other parts of application logic, such as required scripts and data, on demand in this way, they do not delay the launch process this flow is more optimized, as many tasks are performed in parallel initially, the application loads only the modules which are necessary for authorization and starts authorization immediately along with other operations, such as loading the rest of the framework, the ui, resources, and content any tasks not required for displaying the home page are postponed to start after the launch process consequently, application launch time is much shorter than before improving launch time the following table lists optimization strategies that can improve application launch time, and the application launch stages they affect optimization stage 1 2 3 4 5 migrating application to tizen + + enabling prelaunch + + + + minimizing home page code + + loading js files asynchronously + + sending ajax requests promptly + + parallelizing ajax requests concatenating ajax requests + + + delaying platform and tizen api calls + + caching api output + + + using jquery 2 x or higher + + + loading static resources locally + + minimizing and concatenating code + + removing obsolete code + + using sprites + + + using pure css + + + enforcing gpu acceleration + table 2 launch stages affected by optimizations migrating application to tizen stages affected 1 and 3 tizen is more efficient than samsung legacy platform migrating the application from samsung legacy platform to tizen can improve its performance significantly enabling prelaunch stages affected 1, 2, 4, and 5 tv web applications in tizen support prelaunching applications can load in the background when the samsung tv is switched on when the user launches the application, it loads more quickly because it has been prelaunched for more information, see prelaunching applications minimizing home page code stages affected 2 and 5 application launch time can be improved by loading and parsing less code at launch when the application launches, load only the html, js, and css code necessary to show the home page other code can be loaded on demand using a library, such as require js, to avoid building and parsing the dom before it is needed loading javascript files asynchronously stages affected 2 and 4 when loading external javascript files normally, the html parser stops while the javascript files are downloaded and executed to avoid the pause in html parsing during download, you can use the defer and async attributes <script src='js/main js' defer></script> <script src='js/scripts js' async></script> using the defer attribute downloads the javascript file in parallel while parsing html the javascript code executes only when all html parsing is complete scripts using the defer attribute are guaranteed to execute in the same order that they appear in the document using the async attribute downloads the javascript file in parallel while parsing html, but when the download completes, the html parser pauses to execute the script the defer and async attributes can be used only for scripts implemented with the script element and src attribute for more information, see the html <script> element handling ajax requests you can improve launch time by optimizing ajax request usage sending ajax requests promptly stages affected 2 and 4 most applications load their content from remote servers and utilize a framework that helps manage the requests however, loading and executing the framework code can take a lot of time to speed up application launch, send the ajax requests needed to display the home page as soon as possible you can send a simple xhr request at the beginning of the "index html" file, before loading the framework xhr requests are asynchronous and do not block any other threads cache the response in a global object, so the application framework can use the data immediately to display the home page without sending the request again parallelizing ajax requests send ajax requests in parallel if they are not dependent on responses from prior requests before each request is executed after receiving a response from the previous one sendrequest1 onsuccess sendrequest2 onsuccess sendrequest3 onsuccess sendrequest4 onsuccess sendrequest5 after the first request authorizes the application after receiving the response, the other requests are executed asynchronously sendrequest1 onsuccess sendrequest2 sendrequest3 sendrequest4 sendrequest5 concatenating ajax requests stages affected 2, 4, and 5 limit the number of ajax requests by merging several requests, if possible the fewer requests there are, the less time it takes to process all of them for example, consider an application that sends 3 requests to display the home page, such as for application authorization, a list of recommended movies, and a list of the latest movies verify whether it is possible to modify the requests and backend in such a way that the response for the authorization request contains the recommended and latest movies as well you can also use this strategy throughout the application to reduce the loading time of other scenes delaying platform and tizen api calls stages affected 2 and 4 many applications make early calls to tizen and platform apis for static information, such as the duid or model code because api initialization is "lazy" the api is initialized only when it is first needed , the first call to each api module takes time postpone api calls until the application is fully started and ready to use, if possible caching api output stages affected 2, 4, and 5 instead of querying the api each time, cache the static output from product and tizen apis in javascript variables consider the following scenarios the total duration of video content is constant during video playback you can retrieve it once and store it in a javascript variable instead of querying the api each time it is needed tv specification parameters, such as the duid or model code, never change you can retrieve the parameters using the api the first time the application is launched and save it in localstorage retrieving data from localstorage is quicker than querying the api using jquery 2 x or higher stages affected 2, 4, and 5 newer versions of jquery are smaller and faster you can also consider using a custom jquery build loading static resources locally stages affected 2 and 4 load static application resources directly from the local file system, by including all application source code, external libraries, and static ui elements, such as css and images, within the tizen package before <link rel='stylesheet' href='https //maxcdn bootstrapcdn com/bootstrap/3 3 5/css/bootstrap min css'> <link rel='stylesheet' href='https //example com/myapp/css/styles min css'> <script src='http //code jquery com/jquery-2 0 0 min js'></script> <script src='https //maxcdn bootstrapcdn com/bootstrap/3 3 5/js/bootstrap min js'></script> after <link rel='stylesheet' href='css/bootstrap min css'> <link rel='stylesheet' href='css/styles min css'> <script src='js/jquery-2 0 0 min js'></script> <script src='js/bootstrap min js'></script> this not only decreases loading time, but can also improve application security and eliminate some application errors caused by network issues minimizing and concatenating code stages affected 2 and 4 the application loads faster when it makes fewer requests to the file system if you do not want to use a lazy loading mechanism to load parts of the application on demand, concatenate and minimize your source code, especially javascript and css files before <!doctype html> <html lang='en'> <head> <meta name='viewport' content='width=1280, user-scalable=no'> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <title>my application</title> <link rel='stylesheet' type='text/css' href='styles/main css'> <link rel='stylesheet' type='text/css' href='styles/list css'> <link rel='stylesheet' type='text/css' href='styles/player css'> <link rel='stylesheet' type='text/css' href='styles/login css'> <link rel='stylesheet' type='text/css' href='styles/account css'> <script src='js/main js'></script> <script src='js/list js'></script> <script src='js/player js'></script> <script src='js/login js'></script> <script src='js/account js'></script> </head> <body> <div id='menu'></div> <div id='maincontainer'> <div id='helpbar'></div> </body> </html> after<!doctype html> <html lang='en'> <head> <meta name='viewport' content='width=1280, user-scalable=no'> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <title>my application</title> <link rel='stylesheet' type='text/css' href='styles/all_styles css'/> <script src='js/all_scripts js' defer></script> </head> <body> <div id='menu'></div> <div id='maincontainer'> <div id='helpbar'></div> </body> </html> in some situations, it can be better to concatenate your code into 2 files instead of 1 if the code must be executed as soon as possible, put it into a file that is loaded with the async attribute if the code requires the dom to be ready before execution, put it in another file that is loaded with the defer attribute make sure that the code loads in the correct order to satisfy its dependencies removing obsolete code stages affected 2 and 4 if the application loads any unused source code, whether it is javascript, css, or html, the browser takes time to parse it, build the dom, and search the html code for matching css rules keep your code clean and up to date to avoid unnecessary performance issues caused by obsolete or redundant code for example, when the window onload method is called, calling the unregisterkey method of the tvinputdevice api is unnecessary because no keys are registered other than the default "left", "up", "right", "down", "enter", and "back" keys using sprites stages affected 2, 4, and 5 if your application loads many small graphics, such as icons, button elements, and backgrounds, consider using css sprites css sprites help images load faster by making fewer requests to the file system, which improves overall application performance you can merge all of the icons or background images into 1 large image and use css to set the positions for each element consider the following mouse hover implementation before #mybutton { width 300px; height 100px; background url 'img/button-normal png' 0px 0px no-repeat; } #mybutton hover { background url 'img/button-hover png' 0px 0px no-repeat; } this code is not optimal, as the browser must make 2 requests to the file system instead of 1 additionally, the first time the user hovers on the button, its background will flicker, as some time is needed to request the new image and show it on the screen after #mybutton { width 300px; height 100px; background url 'img/button-sprite png' 0px 0px no-repeat; } #mybutton hover { background url 'img/button-sprite png' 0px -100px no-repeat; } this code is more optimal because it loads only 1 image which takes less time to load, even though its size is bigger mouse hover changes only the background image position, so there is no flickering when switching between the states using pure css stages affected 2, 4, and 5 tizen supports css3, which allows you to create many graphic effects without using image files pure css renders faster and takes less time to calculate its properties, which is especially valuable when animating css elements the following code creates a button using only pure css button { width 180px; height 62px; line-height 62px; font-size 24px; color #fff; text-align center; text-shadow 1px 0 1px rgba 0, 0, 0, 75 ; background -webkit-linear-gradient top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100% ; border solid 2px #fff; border-radius 12px; box-shadow 0px 0px 15px 5px rgba 255, 255, 190, 75 ; } enforcing gpu acceleration stage affected 5 normally, the browser applies gpu acceleration when there is some indication that a dom element can benefit from it css3 allows you to force the browser to render elements with gpu acceleration one of the simplest methods is setting a style indicating 3d transform, even when no real 3d transformation is applied acceleratedelem { -webkit-transform translatez 0 ; } in general, 3d transformations in css force the browser to use the gpu the following declarations can reduce flickering during css transforms or animations acceleratedelem { -webkit-backface-visibility hidden; -webkit-perspective 1000; } for more information, see an introduction to css 3-d transforms and increase site performance with hardware-accelerated css optimizing javascript code follow a reliable and consistent coding standard and style for javascript, as it makes the code easier to write, easier to read, improves its maintainability, and makes it less error-prone the following section presents javascript best practices that are frequently used in the web community caching dom element references searching the dom tree is a resource-hungry operation if there are dom elements on which you perform operations frequently, store them in javascript variables to avoid repetitive dom traversal prefer var elem1 = document getelementbyid 'elem1' ; elem1 innerhtml = 'lorem ipsum dolor'; elem1 classlist remove 'class1' ; elem1 classlist add 'class2' ; var $elem2 = $ '#elem2' ; $elem2 html 'lorem ipsum dolor sit amet' ; $elem2 addclass 'class3' ; avoid document getelementbyid 'elem1' innerhtml = 'lorem ipsum dolor'; document getelementbyid 'elem1' classlist remove 'class1' ; document getelementbyid 'elem1' classlist add 'class2' ; $ '#elem2' html 'lorem ipsum dolor sit amet' ; $ '#elem2' addclass 'class3' ; it can be helpful to store references to frequently-used dom elements in a global object for example var domelementscache = { eldocument window document, elhtml window document documentelement, elbody window document body, elhead window document head, eltitle window document getelementbyid 'title' }; domelementscache eltitle innerhtml 'my title' ; avoiding slow jquery selectors jquery selectors work slower than native ones if application performance is critical, consider replacing jquery selectors, for example id selector //jquery var elem = $ '#myelem' ; //native js equivalent var elem = document queryselector '#myelem' ; class selector //jquery var elems = $ ' class1' ; //native js equivalent var elems = document queryselectorall ' class1' ; tagname selector //jquery var elems = $ 'span' ; //native js equivalent var elems = document queryselectorall 'span' ; $ find //jquery var elems = $el find ' target1, target2, target3' ; //native js equivalent var elems = el queryselectorall ' target1, target2, target3' ; using native methods native javascript methods are faster than wrappers from different libraries in some cases, it can be helpful to use them instead of library methods var myarray = [1, 2, 3]; //underscore _ each myarray, function val { console log val ; } ; //jquery $ each myarray, function val { console log val ; } ; //native js equivalent for var i = 0; i < myarray length; i++ { console log myarray[i] ; } removing console logging extensive logging decreases application performance, because each console log method call blocks the javascript thread in the browser other logging methods, such as the console warn , console info , console error methods, behave similarly to improve application performance, remove log methods in the final build you can use a logger utility to easily switch logging on and off open source libraries, such as woodman, are available, or you can write your own logger, such as the following example // global object for storing application configuration var applicationconfig = { debugmode true //enables logs in application }; // logger object factory var logger = function { var logger = {}; if applicationconfig debugmode === true { logger = { log function { var args = array prototype slice call arguments, 0 ; console log args ; }, info function { var args = array prototype slice call arguments, 0 ; console info args ; }, warn function { var args = array prototype slice call arguments, 0 ; console warn args ; }, error function { var args = array prototype slice call arguments, 0 ; console error args ; } }; } else { logger = { log function {}, info function {}, warn function {}, error function {} }; } return logger; }; // usage // for development and debugging var applicationconfig = { debugmode true }; var mylog = new logger ; // initializes logger mylog log 'test' ; // outputs 'test' to console //for production var applicationconfig = { debugmode false }; var mylog = new logger ; // initializes logger mylog log 'test' ; // does nothing importantnever override console log or any other native function overriding native objects is a bad practice in javascript, as it can lead to unexpected behavior and introduce defects that are very hard to debug optimization results the principles described in this guide were applied to several samsung tv applications, as listed in the following table optimization application a b c d e f migrating application to tizen + + + + + + enabling prelaunch + + + + + + minimizing home page code + + + + + + loading js files asynchronously + + + + + + sending ajax requests promptly + + + + parallelizing ajax requests + + + concatenating ajax requests + + delaying platform and tizen api calls + + + + + caching api output + + + + using jquery 2 x or higher + + + + loading static resources locally minimizing and concatenating code + + + + + + removing obsolete code + + + using sprites + + + + + + using pure css + enforcing gpu acceleration + caching dom element references + + + + + + avoiding slow jquery selectors + + + using native methods + + removing console logging + + + + + table 3 optimizations applied to samsung tv applications the following table lists the launch time optimization results application beforeoptimization afteroptimization reduction reduction % a 7 234 s 4 422 s 2 812 s 38 87% b 6 972 s 4 642 s 2 330 s 33 42% c 4 160 s 3 140 s 1 020 s 24 52% d 16 512 s 4 011 s 12 501 s 75 71% e 4 090 s 3 153 s 0 937 s 22 91% f 17 853 s 7 462 s 10 391 s 58 20% average reduction 4 999 s 42 27% table 4 results of application launch time optimization the average reduction in application launch time was almost 5 seconds, a 42% improvement this result suggests that it is worthwhile to optimize applications, wherever possible
announcement design, game, galaxy watch, mobile, marketplace
bloghi, this is eric from samsung developers. normally, i’m behind the scenes managing the samsung developers website and creating tools for our talented group of developer evangelists. today, i’m going to step into the spotlight and chat with my friend and colleague, tony morelan, about the next season of pow! the samsung developers podcast. eric: we’re starting season 2 of the samsung developers podcast next week. can you tell our readers how the podcast got started? tony: after the success of the best of galaxy store awards at sdc 2019, we talked about new ways we could engage with our audiences. we were already doing live events, webinars, and office hours, but we wanted to find a way to give our successful developers and designers a way to connect with fellow developers and tell their stories. eric: for those who might not know about the pow! podcast, how would you describe it? tony: the goal of the podcast is to inspire people to create for samsung. we do this by interviewing influential designers and developers, as well as people internally at samsung talking about the latest tools and services. eric: i listen to a lot of podcasts about coding, baseball, music, history, and classic cars. some podcasts, like hardcore history, have incredibly high production values and could be the soundtrack for a documentary, while many others are just a casual back-and-forth conversation without a lot of cuts. can you take us through your vision for the podcast and the steps you go through to make a podcast episode? tony: my vision for the podcast has always been to create a channel for developers and designers to learn about new opportunities and hear from the success of others. i was first inspired by the npr podcast how i built this hosted by guy raz. his podcast has inspirational stories, great interviews and high-quality production. i absolutely love how they integrate music throughout each episode to help set the mood and give color to the audio. the first step for each episode is to first have a pre-interview call with the guest. this is my chance to go over the production steps, review questions and topics and just work out any technical issues. about a week later we will record the actual interview, which always is just a casual conversation between two people. the beauty of doing a pre-recorded interview is that we get to make mistakes and do re-takes. this really helps take the stress out of recording so that we can just relax and talk away. eric: one thing i noticed when listening to season 1, is that you always start the conversation by asking who they are. some people answer very straightforward, as if reading their cv, while others go way off script. i think it’s such a unique way to start the conversation. what led you to start with that question? tony: that all started because typically i really don’t know the person before they come on to the podcast. i wrote that question for the pre-interview so that i could get a quick peek into their personality. is this person very type a; structured, formal, precise? or are they type b; free flowing, loose and care-free? having this little sneak peek into their personality helps me write the questions for the interview. however, i realized that listeners would love to know this as well. so as an ice-breaker i always start each episode with this same question, and it is very interesting how each person answers it so differently. eric: because of the covid pandemic, the way we do our jobs has certainly changed. i miss seeing everyone in person, but i don’t know anyone that misses their commute. how has covid changed your work on the podcast last year? tony: samsung had us working from home starting in march 2020. i had just returned from orlando, florida after attending the podfest 2020 podcast conference and was only in the office for one day. none of us would’ve imagined that we’d still be working from home almost a year later. i remember those first remote meetings we did as a group, thinking we’d be isolating for 6-8 weeks and then return to the office environment. fortunately, i have worked on many audio and video projects from my home studio. so i was able to conduct most of the season 1 interviews from home. eric: what were your favorite moments from the first season of the podcast? anything that surprised you during your interviews? tony: there were lots of great moments. having been a huge fan of the forza franchise, it was great to interview andy beaudoin from microsoft/turn 10 studios. it was also a lot of fun for me to be interviewed by our own charlotte allen and tell my crazy story about how i ended up at samsung. another top highlight was the interview with chris shomo. when i was first learning that you could design and sell watch faces for samsung, i found a video of chris speaking at the 2017 samsung developer conference. it was that video that inspired me to see if i could design and sell my own watch faces. who would have thought that a few years later i would be hosting a podcast for samsung and interviewing chris. that was insane! oh ya, and learning that his house was featured in a hollywood movie and that it really is haunted! eric: i believe we got some great feedback from our community on season 1. did any of this feedback influence how you prepared for this season 2? tony: all of the feedback we received was great. i especially enjoyed receiving the personal messages from listeners and how inspired they were. it’s this energy that motivates us to have another great season. eric: season 1 had a mixture of developers, designers, and samsung employees sharing their thoughts. what can you share with our readers about the upcoming season of the podcast? tony: i am really excited about season 2. i think the biggest addition this season is that i will be interviewing many of the 2020 best of galaxy store winners. it seems like each winner has such a unique story to tell. all of their journeys are so vastly different, and i know they will be very insightful. eric: anything else you can tell us about season 2? tony: we have some interviews scheduled around big announcements, new releases, updates, etc. i am super excited to share this news on the podcast when it can publicly be revealed. thanks to tony morelan for joining me today. the first episode of season 2 will be available next monday, february 22nd. to follow along, use your favorite podcast app or listen directly page. for more information on working with samsung to develop apps, galaxy watch faces, and galaxy themes, sign up for our newsletter and visit our developer forums.
Samsung Developers
Learn Code Lab
codelabmovies, and admission tickets, status updates related to expiration and availability can be provided gift card gift card, also referred to as a prepaid card, provides real-time balance and transaction history loyalty loyalty cards function as membership credentials, managing membership information through these cards, loyalty points can be administered and redeemed id id cards can fulfill identification verification purposes, such as identity cards, employee cards, and licenses physical documents can be represented through wallet cards, and near field communication nfc -based authentication can be provided reservation reservation cards can contain diverse online booking details, including rental cars, restaurants, and accommodations ongoing reservation information can be managed as a journey pay as you go pay as you go cards allow users to register services that can be charged and utilized according to their preference for convenient use generic card generic cards enable users to create customized cards by selecting preferred card template layouts and designing elements notedepending on your country or region, some card types are not supported if you need assistance, please contact us at developer samsung com/dashboard/support the image below shows the process of managing wallet cards for more information, refer to manage wallet cards set up your environment you will need the following latest version of samsung wallet app from galaxy store samsung galaxy device that supports samsung wallet access to samsung wallet partners site internet browser, such as chrome openssl intellij idea or any java ide optional start the onboarding process partners can manage wallet cards and monitor performance with the samsung wallet partners site to join as partner generate a private key and certificate signing request csr using the openssl command you can follow the instructions in security factors notea private key enables encryption and is the most important component of certificates while csr, which is a necessary factor to obtain a signed certificate, includes the public key and additional information like organization and country proceed to register in the samsung wallet partners site using your samsung account follow the samsung wallet partner onboarding process upload the generated csr for data encryption in encryption setting management section after registration, you will receive a welcome email noteupon receiving the certificates via email, be sure to keep the information safe from exposure and only use them for the following purposes signed certificate used along with the private key to sign data samsung certificate used to encrypt card data and validate authentication tokens in server api headers create a wallet card follow the steps below to create a wallet card in samsung wallet partners site click the wallet cards menu and choose create wallet card fill out the general information form with the details of the wallet card in wallet card template, choose a card type and sub type select the design type and click done you can choose from various types of wallet card templates optimized for partners after inputting all necessary details, click save to set the wallet card status to draft launch the wallet card you can launch and request activation of the card by clicking the launch button upon agreeing to proceed, the launch button text changes to launched and the card status becomes verifying add the card to samsung wallet using the test tool open a web browser on your computer or galaxy mobile device, and go to the following link partner walletsvc samsung com/addtowallettest go to add to wallet tab and click choose key file to upload your private key in the select card dropdown menu, select the created card to display the card details and populate sample data navigate to the form tab and modify the card data as desired notethe structure for configuring wallet cards follows the defined specification you can refer to the full list of card-specific attributes specification scroll down to the bottom of the page and click the add to samsung wallet button click done when a preview of the card shows on your mobile screen with a message indicating that the card has been added to your wallet once the card is added to your samsung wallet app, you can check its details by clicking on it noteyou can also go to the playground tab and add cards to the samsung wallet app even without creating a card on the wallet partners site update the status of the added card if a server api info partner get card data and partner send card state is registered in the wallet card, real-time updates of the user's registered cards can be provided notefor more information, see server interaction modify and update the card's status by utilizing the push notification feature of the test tool navigate to the push notification tab ensure that the correct private key is uploaded and the same card as in the add to wallet tab is selected copy the ref id value from the add to wallet tab and paste it into ref id field in the push notification tab in the status field, enter one of the following card states expired, redeemed, held, suspended, or deleted the current state is set to active then, click the request push notification button check the card in the samsung wallet app to confirm the change tokenize card data and implement the add to samsung wallet button to your service optional notethis step is optional, but if you want to learn how to integrate the add to samsung wallet button into your services like an android app, web app, or email, you can follow these steps the samsung wallet partners site provides generated add to samsung wallet scripts for each wallet card you create you can simply copy and paste these scripts into your partner apps web and android or include them in emails/mms messages to implement the add to wallet button, follow these steps go to the [add to wallet script guide] section of the card you created click show to view the available scripts and then copy the appropriate script for your service develop a program that can generate tokenized card data cdata the cdata represents the actual content of the wallet card and comes in different formats depending on the card type you can check the cdata generation sample code for reference the cdata is derived from the card data, which is in json format for testing purposes, you can utilize the generated json from the test tool follow the implementing atw button guide to determine where to incorporate the generated cdata and gain further insights into this process you're done! congratulations! you have successfully achieved the goal of this code lab topic now, you can utilize the add to samsung wallet service by yourself! to learn more about samsung wallet, visit developer samsung com/wallet
success story design, mobile, galaxy watch, marketplace
blogmovies are visually pleasing, they are typically not so easy to read. for designing themes, the most important ux consideration is usability. well-designed themes encompass a balanced dance between visually pleasing elements and logical layout. you were awarded best indie themes designer, however you got started as a galaxy watch designer. yes, developing a watch face is not only more related to industrial design than developing themes, but it’s also what i intended to do back in 2013. as a designer do you use a similar process when designing themes and watch faces? usability is universal, it’s a blueprint for successful design in both themes and watch faces. however, the two have very different usages. watch faces are meant to be used in a very short duration like a few seconds, while interaction with mobile phones are much longer. the design approach for the two are quite different as well. what is the biggest technical/design hurdle when designing a watch face? i would say it’s the physical screen size, there’s only so much information you can put in a 360x360 pixel area before the watch face becomes overloaded with clusters of information. what is the biggest technical/design hurdle when designing a theme? unlike watch faces, which consist of one or two pages at the most, phones have tens of pages. the same pages may have different elements depending on os versions and phone models. the biggest challenge designing themes for me is familiarizing myself with the overall layout of each os version. staying abreast of the most popular samsung phone models is also an ongoing process. based on your journey from industrial designer to watch face designer and now award winning themes designer, are there any tips you can give designers who are interested in taking a similar journey? human-product interaction is universal for both virtual/digital and physical products. physical products deal with ergonomics and digital/virtual products deal with interaction. but the end goal for both is the same: to create a seamless and pleasant user experience for the products. for industrial designers, watch face development is relatively the same with industrial design, so it would be a good starting point to get their feet wet. what is next for x9 studio? developing virtual goods for virtual worlds is another area that i’m looking at. but for the immediate future, i’ll continue to focus on watch faces and themes development. what advice do you have for new designers looking to create a successful theme or watch app business? for new designers who just got out of school, my advice is to continue your design education through your first job or two. learn about watch and theme app development, and make a few apps on your own spare time and see where it takes you. for seasoned designers, create some apps using galaxy watch designer and galaxy themes studio. see if it’s the right path for you. having a realistic expectation will go a long way. rome wasn’t built in a day. keep your day job while building up your app portfolio. eventually you’ll be able to work anywhere on earth where the internet reaches. how has samsung helped your business? coming from a completely different industry with very limited knowledge of app development, the samsung developer program (sdp) and fellow samsung developers have been instrumental to the success of x9 studio. the sdp website provides a wealth of learning materials, and the sdp team members provide invaluable insights for new developers like me, which are absolutely the keys to x9 studio’s growth. samsung’s developer community, like the developer forum is another valuable resource. we want to thank john for sharing his journey to becoming the best indie themes designer 2019 and the universal aspects of product and software design. be sure to check out x9 studio’s themes portfolio and download your favorite in the galaxy store. if you're reading this on a samsung device, check out the x9 studio brand page. follow us on twitter at @samsung_dev for more developer interviews as well as tips for building games, apps, and more for the galaxy store. find out more about our best of galaxy store awards.
Samsung Developers
We use cookies to improve your experience on our website and to show you relevant advertising. Manage you settings for our cookies below.
These cookies are essential as they enable you to move around the website. This category cannot be disabled.
These cookies collect information about how you use our website. for example which pages you visit most often. All information these cookies collect is used to improve how the website works.
These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and tailor the website to provide enhanced features and content for you.
These cookies gather information about your browser habits. They remember that you've visited our website and share this information with other organizations such as advertisers.
You have successfully updated your cookie preferences.