Filter
-
Content Type
-
Category
Mobile/Wearable
Visual Display
Digital Appliance
Platform
Recommendations
Filter
Develop Samsung Wallet
docmovies, entrances, and etc event tickets in wallet can provide additional information about the event and an alarm before the event time and expiration ticket cards support event commodities for performances, sports, movies, and entrance wallet card type wallet card type wallet card subtype ticket performances, sports, movies, entrances, others performances movies sports entrances wallet card data fields attributes type value description payload object cardtemplate object required wallet card template object cardtemplate prtnridstring 32 required partner id cardtemplate templaterefidstring 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 subtypestring 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 applogoimgstring 200 optional the banner logo image url cardtemplate nonetworksupportyn string 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate sharebuttonexposureynstring 1 optional this must be set to either 'y' or 'n' * default 'y' cardtemplate privacymodeynstring 1 optional this must be set to either 'y' or 'n' * default 'n' cardtemplate preventcaptureynstring 1 optional this value is a screen capture prevention flag that defines whether the content view prevents screen capture cardtemplate statestring 15 optional wallet card's state* default 'draft' cardtemplate testingmodeoffstring 1 optional testmode offeither 'y' or 'n'* default ‘n’available only when updating templates cardtemplate descstring 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" } }
Develop Samsung Wallet
dochelpful resources data structure and format additional information additional information to be delivered to customers can be defined in the following format be careful of the content string length if an attribute does not allow long content, it is not displayed on the device json format key type requirement description count integer required size of information info[] object arrays required container of information info[] title string required title * need either content or chart info[] content[] string arrays optional content text info[] chart object optional chart data info[] chart headers[] string arrays optional header of chart info[] chart body[] array required body of chart info[] chart metadata[] string arrays optional metadata of chart * units or additional information of chart example * extra information for a boarding pass { "count" 3, "info" [ { "title" "baggage allowance", "content" [ "15 kg" ] }, { "title" "boarding priority", "content" [ "yes" ] }, { "title" "seat class", "content" [ "economy plus" ] } ] } * an example case of long content being allowed movie ticket policy { "count" 2, "info" [ { "title" "refunds and exchanges", "content" [ "refunds and exchanges of movie ticket s are available in certain limited circumstances ", "movie tickets purchased through the services include a non-refundable convenience fee before purchasing your movie ticket s we urge you to confirm the title, time, location and quantity of tickets for the movie you wish to see " ] }, { "title" "changes to ticket policy", "content" [ "from time to time, we may revise this ticket policy you can determine when this ticket policy was last revised by referring to the top of this page any changes to this ticket policy will become effective upon posting of the revised ticket policy on the internet, accessible through the services " ] } ] } * example usage of charts { "count" 1, "info" [{ "title" "paygo price guide for usage", "chart" { "headers" ["grade", "round", "one-way"], "body" [ ["platinum", "$25", "$10"], ["gold", "$30", "$15"], ["silver", "$40", "$20"] ], "metadata" "unit /h" } }] } paygo price guide for usage members grade round one-way platinum $25 $10 gold $30 $15 silver $40 $20 unit /h the above example may differ from what is actually displayed links linkable data which provides additional information in the following format json format key type requirement description count integer required size of links info[] array of objects required container of links info[] link string required link url info[] type string required view type that will run the link* allowed values web, app, browser info[] text string optional text of the link example { "count" 1, "info" [{ "link" "https //samsung external info link", "type" "web", "text" "see more information" }] } classification classification defines different kinds of people who can use the cards json format key type requirement description person[] array of object required container of person list who can use the card person[] category string required category name person[] count string required number of person example * 3 persons with a ticket { "person" [ { "category" "adult", "count" 2 }, { "category" "child", "count" 1 } ] } * 1 person with a ticket { "person" [ { "category" "adult", "count" 1 } ] } transactions transactions to be delivered to customers can be defined in the following format be careful of the content string length if an attribute does not allow long content, it will not be displayed on the device json format key type requirement description [] date string required transaction date [] amount string optional amount value [] description string optional description example * an example for payasyougo-evcharge-transactions [ { "date" "2023-09-10 12 00 00", "amount" "50,000 won", "description" "suwon station branch" }, { "date" "2023-09-20 18 00 00", "amount" "70,000 won", "description" "gangnam central branch" } ] locations locations refer to place information that denotes where a card can be used using this information, samsung wallet can show a map, place name, and address additionally, location information can be used to provide location-based services lbs location information can be represented by a json array and up to 10 locations can be specified notice map services are only available in certain countries json format key type requirement description [] lat double optional latitude [] lng double optional longitude [] address string required string containing the full address [] name string required branch name example * location information for the entrance to oracle park [ { "lat" 37 779337, "lng" -122 388755, "address" "24 willie mays plaza, san francisco, ca 94107", "name" "willie mays plaza" }, { "lat" 37 77814, "lng" -122 390836, "address" "king st, san francisco, ca 94107", "name" "king st" } ] card art guide loyalty description type bgimage + bgcolor bgimage only description display the bgimage and the bgcolor in a predefined ratio display bgimage fully description
Instant Plays
docmovies, tv and music, are consumed the ott video streaming service changed the way people watch movies and tv, disrupting both the dvd rental and buy/download distribution models music streaming services disrupted the traditional music download model of mp3s but the most popular digital content on mobile devices —mobile games, with over 2 billion users globally—has not followed this trend consumers still download individual games to their devices from legacy app stores, like they did for movies and music over a decade ago we are bringing the fun and excitement of discovering and playing mobile games to users, all without the download bring your mobile games directly to users with our cloud streaming tech take a user from an ad click directly into your game our mobile cloud game platform allows you to bypass the app store’s installation process and bring users directly from an ad click right into your game instantly via streaming this could effectively make your user acquisition cost-per-click cpc equivalent to an acquired user cpi , driving 10x scale at the top of the acquisition funnel against the same advertising dollars spent increase accessibility to compatible devices as cloud streaming reduces the dependency on a user’s device, with all computing done within our virtual android clusters, your game becomes immediately available and accessible to all compatible samsung galaxy devices when accounting for active lower-end devices globally, this could increase your exposure to additional devices, significantly increasing your top-of-funnel traffic to your game samsung gaming hub, an organic discovery platform for your cloud-enabled games millions of mobile gamers use our gaming hub app daily, preloaded on all galaxy devices, to manage their gaming experience we have recently redesigned gaming hub to focus the user experience on easy and personalized content discovery for mobile cloud games similar to an ott video streaming service, a gamer can discover, click and instantly play your games without the friction of download and installation this scaled organic channel can augment and complement your paid user acquisition campaigns our proprietary tech platform integrates seamlessly with your existing business when you upload your apk to samsung galaxy store seller portal, we pre-install your apk to our android cloud servers, making your game ready for streaming galaxy store, pre-loaded on all galaxy devices, acts as the stream run-time client existing in-game monetization models are enabled for in-app purchases iap and in-app advertising use of samsung iap sdk and samsung ads sdk are required user acquisition campaign attribution is enabled via mmps mobile measurement partners samsung is uniquely positioned to enable this platform at scale no additional software download required the cloud stream is run through galaxy store, samsung’s owned-and-operated app store this not only allows our mobile cloud platform to leverage existing features of galaxy store, such as iap management and samsung checkout, it also means that the user has access to your games on their device with no additional software or downloads required contact your samsung representative to find out how you can start using our cloud streaming technology, instant plays 2 0, to deliver your games directly to users
Develop Samsung Wallet
docmovies, entrances, and etc event tickets in wallet can provide additional information about the event and an alarm before the event time and expiration ticket cards support event commodities for performances, sports, movies, and entrance wallet card type wallet card type wallet card subtype ticket performances, sports, movies, entrances, others performances movies sports entrances wallet card data fields attributes type value description attributes {fields} title string 32 required main title e g , mlb ticket category string 16 optional ticket category * this will be deprecated eventid string 32 optional if full cancelation of the event occurs, find and process all tickets with this id groupingidstring 32 optional identifier used to group related cards orderidstring 32 optional a unique identifier for an order mainimg string 256 required url for main ticket image the file size should not exceed 512 kb subtitle1 string 32 optional the auxiliary field which displays supporting information logoimagestring 256 required logo image url to be displayed in the card item the file size should not exceed 256 kb logoimage darkurlstring 256 required logo image url in dark mode the file size should not exceed 256 kb logoimage lighturlstring 256 required logo image url in light mode the file size should not exceed 256 kb wideimagestring 256 optional wide horizontal image url displayed on the card information screen the file size should not exceed 256 kb providername string 32 required ticket provider name providerviewlinkstring 512 optional link to additional information from the provider* see links format classificationstring 16 optional classification of tickets use onetime, regular, or annual * default onetime holdernamestring 64 optional name of card holders idphotostring 20k optional holder’s photo image data encoded base64 idphoto format string 32 optional image file formate g , jpeg, png * unsupported image formats may exist idphoto status string 16 optional status of the dataallowed value unchanged gradestring 32 optional ticket grade seatclassstring 32 optional seat class entrancestring 64 optional entrance gate seatnumber string 256 optional seat location seatlayoutimage string 256 optional url of the seat layout image the file size should not exceed 512 kb issuedatelong 13 required issue date epoch timestamp in milliseconds reservationnumberstring 32 required reservation number userstring 64 optional name of person who made the reservation certification string 16 optional ticket certification e g ,r, as a film rating reactivatableynstring 1 optional flag whether the card is able to activate an expired ticket temporarily either 'y' or 'n' * default 'n' preventcaptureyn string 1 optional flag whether this wallet card view prevents screen capture either 'y' or 'n'* default 'n' nonetworksupportyn string 1 optional set whether to support to open the wallet card under 'no network' status either 'y' or 'n' * default 'n' startdate long 13 required start date displayed start date epoch timestamp in milliseconds startdate utcoffset string 8 optional utc offset of start date time at the event location enddate long 13 optional end date displayed end date epoch timestamp in milliseconds * if null, the card will expire in 10 hours from startdate enddate utcoffsetstring 8 optional utc offset of start date time at the event location person1 string 512 optional number of persons by category * see classification format locationsstring 1024 optional list of locations where the card can be used * see location format noticedesc string 5000 required text of the notice * long content is allowed * see additional information format groupinfo1 string 64 optional the first common information with the same groupingid groupinfo2 string 64 optional the second common information with the same groupingid *it is recommended to set groupinfo1 first groupinfo3 string 64 optional the third common information with the same 'groupingid' *it is recommended to set groupinfo1, groupinfo2 first csinfostring 512 optional providers’ customer service informationusing data in json format converted to escape string * allowed items call, email, website, facebook, youtube, or instagram* see the example below privacymodeynstring 1 optional whether or not to require user authentication when using the cardeither ‘y’ or ‘n’* default ‘n’ applinklogo string 256 required app link image url the file size should not exceed 256 kb applinknamestring 32 required app link name applinkdatastring 256 required information about the partner app link bgcolor string 8 optional color of the card art e g , #00ffff fontcolor string 8 optional color of the font on the card art acceptable values dark, light blinkcolorstring 8 optional color of the blinking effect in the indicator areae g , #00ffff barcode value string 4096 optional actual data that is delivered when the barcode/qr code is scanned barcode serialtype string 32 optional presentation type e g , serialnumber, barcode * see barcode format barcode ptformat string 32 optional presentation format e g , barcode, qrcode, serial * see barcode format barcode ptsubformat string 32 optional presentation sub-format e g , code_128, qr_code * see barcode format barcode errorcorrectionlevel string 4 optional amount of redundancy or error correction data included in the code there are four error correction levels available in qr codes * code options l/m/q/h barcode intervalstring 4 optional update interval if support for dynamic updatesepoch timestamp in milliseconds provision data string 512 optional elements to complete provisioning* see provisioning for details provision interval string 16 optional update interval if support for dynamic updates epoch timestamp in milliseconds relcoupon{i} title string 32 conditional coupon title * required if this ticket has a related couponi 1~3 relcoupon{i} subtitle string 32 optional coupon subtitlei 1~3 relcoupon{i} providername string 32 conditional coupon provider name * required if this ticket has a related coupon i 1~3 relcoupon{i} imagefilesrc string 256 optional coupon image url the file size should not exceed 256 kb i 1~3 relcoupon{i} noticedescription string 1024 optional text of the notice * long content is allowed * see additional information format i 1~3 relcoupon{i} notificationtime long 13 optional coupon exposure time epoch timestamp in milliseconds i 1~3 relcoupon{i} value string 4096 conditional actual data that is delivered when the barcode/qr code is scanned i 1~3 relcoupon{i} serialtype string 32 required presentation typee g , serialnumber, barcode, * see barcode format i 1~3 relcoupon{i} ptformatstring 32 conditional presentation formate g , barcode, qrcode, serial, * see barcode format i 1~3 relcoupon{i} ptsubformat string 32 conditional presentation sub-formate g , code_128, qr_code, * see barcode format i 1~3 relcoupon{i} errorcorrectionlevel string 4 optional amount of redundancy or error correction data included in the code there are four error correction levels available in qr codes - code options l/m/q/h i 1~3 example { "card" { "type" "ticket", "subtype" "entrances", "data" [ { "refid" "ent-ticket-0613001", "createdat" 1686657600000, "updatedat" 1686657600000, "language" "en", "attributes" { "title" "galaxy land entrance ticket", "subtitle1" "standard", "classification" "annual", "groupingid" "group-0613001", "orderid" "ent-0613001", "mainimg" "https // /main png", "logoimage" "https // /logo png", "providername" "galaxy entertainment", "logoimage darkurl" "https // /logo-dark png", "issuedate" 1686657600000, "reservationnumber" "glx-0613-001", "startdate" 1686657600000, "enddate" 1718280000000, "holdername" "kim eunha", "idphoto data" "base64-encoded{image-file-data}", "idphoto format" "png", "grade" "family", "person1" "{\"person\" [{\"category\" \"adult\", \"count\" 1 }]}", "locations" "[{\"lat\" 37 256518, \"lng\" 127 053516, \"address\" \"samsung-ro yeongtong-gu, suwon\", \"name\" \"galaxy land central park\"}]", "noticedesc" "{\"count\" 2,\"info\" [{\"title\" \"notice 1\",\"content\" [\"description 1-1\",\"description 1-2\"]},{\"title\" \"notice 2\",\"content\" [\"description 2-1\"]}]}", "groupinfo1" "adult 1", "groupinfo2" "standard", "groupinfo3" "family", "csinfo" "{\"call\" \"0000-0000\",\"email\" \"samsungwallet@samsungwallet com\",\"website\" \"https //www samsungwallet com/cs/\",\"instagram\" \"https //www instagram com/samsungwallet\",\"youtube\" \"https //www youtube com/@samsungwallet\",\"facebook\" \"https //www facebook com/samsungwallet\" }", "applinkname" "galaxy ticket", "applinklogo" "https // /applinklogo png", "applinkdata" "https //www applinkdata com", "bgcolor" "#e86d1f", "fontcolor" "light", "blinkcolor" "#e86d1f", "barcode value" "serial-0613-001", "barcode serialtype" "qrcode", "barcode ptformat" "qrcodeserial", "barcode ptsubformat" "qr_code" }, "localization" [ { "language" "ko", "attributes" { "title" "갤럭시 랜드 입장권", "holdername" "김은하", "person1" "{\"person\" [{\"category\" \"어른\", \"count\" 1 }]}", "locations" "[{\"lat\" 37 256518, \"lng\" 127 053516, \"address\" \"samsung-ro yeongtong-gu, suwon\", \"name\" \"갤럭시 랜드 센트럴 파크\"}]", "noticedesc" "{\"count\" 2,\"info\" [{\"title\" \"공지사항 1\",\"content\" [\"설명 1-1\",\"설명 1-2\"]},{\"title\" \"공지사항 2\",\"content\" [\"설명 2-1\"]}]}", "groupinfo1" "어른 1" } } ] } ] } }
Develop Samsung Wallet
docmovies", "data" [{ "refid" "ref-20230304-001", "createdat" 1612660039000, "language" "en", "attributes" { "title" "samsung wallet" *see wallet cards }, "localization" [{ "language" "ko", "attributes" { "title" "삼성월렛" } }] }] } } [example filtered using select parameter ] get /cards/12584806754/ref-20230304-0003?select=idphoto { "card" { "type" "ticket", "subtype" "entrances", "data" [{ "refid" "ref-20230304-0003", "createdat" 1612660039000, "language" "en", "attributes" { "idphoto" "{idphoto data}" } }] } } /** or **/ { "cdata" tokenize{data} } [result] http status code description 200 ok success 204 no content card doesn't exist 400 bad request requests cannot or will not be processed the request due to something that is perceived to be a client error 401 unauthorized authorization token is invalid or expired 500 internal server error server encountered an unexpected condition that prevented it fromfulfilling the request 503 service unavailable server is not ready to handle the request send card state partners can manage the state or history of the card using this api if the card state is changed on the samsung device, samsung calls this api using a refid [request] type value description method post url {partner server url}/cards/{cardid}/{refid} headers authorization string 1024 required credential token the token can have prefix "bearer" as an authorization type, e g , bearer <credentials> * see authorization token /wallet/api_new/references/security html x-request-id string 32 required request identifier randomly generated uuid string path parameters cardid string 32 required wallet card identifier * see the ["add to wallet" interfaces]["add to wallet" interfaces_] refid string 32 required a unique content identifier defined by the content provider query parameters cc2 string 2 required country code cc2 for samsung server api event string 16 required events on wallet carde g , added, updated, deleted, provisioned* see card states for details payload callback string 1024 optional callback url for samsung server api [example] post /cards/12584806754/ref-20230304-001?cc2=us&event=added { "callback" "https //us-tsapi walletsvc samsung com" } [response] type value description http status 200 ok payload n/a example 200 ok [result] http status code description 200 ok success 401 unauthorized authorization token is invalid or expired 500 internal server error server encountered an unexpected condition that prevented it from fulfilling the request 503 service unavailable server is not ready to handle the request samsung server api partners can notify their contents changes with the following api service domain environment domain public domain https //tsapi-card walletsvc samsung com private domain ‘callback’ field from send card state api request payload the domains can be selectively used depending on your service requirement if the service needs to register static ips on your system, we recommend using private domain in this case, use the domain received in the request 'callback' field from send card state api if the service does not require ip registration, public domain can be a good choice in this case, country code cc2 is required as a path parameter to configure integration for each environment, register a new card service and get new card id to guarantee safe communication, servers should configure token-based authentication see authorization token for the details update notification if wallet card data content is updated, send a notification to the samsung server [request] type value description method post url {cc2}/wltex/cards/{cardid}/updates headers authorization string 1024 required credential token the token can have prefix "bearer" as an authorization type, e g , bearer <credentials> * see authorization token x-smcs-partner-id string 32 required partner id x-request-id string 32 required request identifier randomly generated uuid string path parameters cc2 string 2 conditional country code cc2 from send card state * required if using public domain cardid string 32 required wallet card identifier granted from partners portal payload card object required wallet card object card type string 16 required wallet card type * see wallet cards card data[] array of object required wallet card data container data[] refid string 32 required unique content identifier defined by the content provider data[] state string 16 required wallet card state for example, active, updated, expired, redeemed, held, deleted, suspended * see card states for details data[] fields string 128 optional wallet cards attributes which has been updated can be specified using commas , as separators it is used when 'data[] state' is updated e g balance,barcode value* supported wallet card types generic [example] post /wltex/cards/12584806754/notification /** header **/ authorization bearer eyjjdhkioijbvvriiiwidmvyijoxlcjwyxj0bmvyswqioiixmjg1o x-smcs-partner-id partner-id-0001 x-request-id req-202303140003 /** payload **/ /** case 1 in general cases **/ { "card" { "type" "ticket", "data" [ { "refid" "ref-ticket-0001", "state" "updated" } ] } } /** case 2 in case of deletion **/ { "card" { "type" "boardingpass", "data" [ { "refid" "ref-boardingpass-0001", "state" "deleted" } ] } } /** case 3 when a specific field is updated **/ { "card" { "type" "idcard", "data" [ { "refid" "ref-idcard-0001", "state" "updated", "fields" "balance" } ] } } [response] type value description http status 200 ok 204 no content payload n/a example 200 ok [result] http status code description 200 ok success 204 no content card doesn’t exist 400 bad request requests cannot or will not be processed the request due to somethingthat is perceived to be a client error 401 unauthorized authorization token is invalid or expired 500 internal server error server encountered an unexpected condition that prevented it fromfulfilling the request 503 service unavailable server is not ready to handle the request cancel notification if a cancelation happens for events such as performances, sports, movies, and journeys, partners can send a notification about it and set all of the related cards to expire this api does not support updates for specific attributes on the card [request] type value description method post url {cc2}/wltex/cards/{cardid}/cancels headers authorization string 1024 required credential token the token can have prefix "bearer" as an authorization type, e g , bearer <credentials> *see authorization token x-smcs-partner-id string 32 required partner id x-request-id string 32 required request identifier randomly generated uuid string path parameters cc2 string 2 conditional country code cc2 from send card state * required if using public domain cardid string 32 required wallet card identifier granted from the partners portal payload card object required wallet card object card type string 16 required wallet card type * see wallet cards card data[] array of object required wallet card data container data[] eventid string 32 conditional required if card type has been set as ‘ticket’ data[] vehicle number string 32 conditional required if "card type" has been set as "boardingpass" data[] estimated oractualstartdate long 13 data[] state string 16 required wallet card state for example canceled* see card states for details [example] post /wltex/cards/12584806754/cancelation /** header **/ authorization bearer eyjjdhkioijbvvriiiwidmvyijoxlcjwyxj0bmvyswqioiixmjg1o x-smcs-partner-id partner-id-0001 x-request-id req-202303140004 /** payload **/ /** a movie ticket has been canceled **/ { "card" { "type" "ticket", "data" [ { "eventid" "event-722164a1a7", "state" "canceled" } ] } } [response] type value description http status 200 ok payload n/a example 200 ok [result] http status code description 200 ok success 204 no content card doesn’t exist 400 bad request requests cannot or will not be processed the request due to somethingthat is perceived to be a client error 401 unauthorized authorization token is invalid or expired 500 internal server error server encountered an unexpected condition that prevented it fromfulfilling the request 503 service unavailable server is not ready to handle the request
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 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 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
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
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.