{"id":9778,"date":"2022-06-21T13:53:09","date_gmt":"2022-06-21T13:53:09","guid":{"rendered":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/"},"modified":"2025-03-25T05:18:34","modified_gmt":"2025-03-25T05:18:34","slug":"webui_migration_to_jst","status":"publish","type":"page","link":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/","title":{"rendered":"WebUI Migration to jst"},"content":{"rendered":"\n <h3 class=\"wp-sub-header\">Introduction to WebUI<\/h3><p>WebUI is a graphical user interface that is available to the connected devices. It acts as an application running on the RDK-B stack and performs the functions of a device management interface similar to TR69 &amp; SNMP. A user can monitor and modify RDK-B feature settings\/rules using WebUI. It is a client&ndash;server application, client runs in a web browser (as part of devices connected over LAN) and Lighttpd on the RDK-B stack acts as server.<\/p><p>The functions in WebUI are defined in C and are called from PHP using ZEND_API. PHP and the Zend Engine manage [exchange] variables internally over the D-Bus.<\/p><p><span>As part of TinyRDK initiative, WebUI is developed in Java script using duktape as JavaScript engine with a focus on portability and compact footprint. All php pages will be in Java script. User interface remains the same.<\/span><\/p><h3 class=\"wp-sub-header\">What is duktape and why it is required?<\/h3><ul><li><span>Duktape is a lightweight javascript engine (<a href=\"https:\/\/duktape.org\/\" class=\"external-link\" rel=\"nofollow\">https:\/\/duktape.org\/<\/a>).<\/span><\/li><li><span>Alone it does not provide a web development engine. Therefore, a template engine(called jst) and web server api is built on top of duktape.<\/span><\/li><li><span>Duktape provides an API to bind javascript to C functions.<\/span><\/li><\/ul><h3 class=\"wp-sub-header\">Focus on migration&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/h3><ul><li><span>To make migration as easy as possible the template and api signature will match php as closely as possible. &nbsp;<\/span><\/li><li><span>Many php functions and variables will be rewritten in javascript, so that changes to the exits code are minimized.<\/span><\/li><li><span>The template engine will provide the same features as php&#8217;s basic templating where php code, embedded in &lt;?php&#8230;?&gt; tags, can be mixed with raw html.&nbsp; <\/span><\/li><li><span>The pages are jst pages and the script tags are &lt;?% &#8230; %&gt;, which is similar to other engines like EJS and JavaServer pages.<\/span><\/li><\/ul><h3 class=\"wp-sub-header\">How jst changes are handled in code?<\/h3><ul><li><span>All the pages in php are converted to jst by compiling and running the script&nbsp;build_php2jst.sh.<\/span><\/li><li><span>With latest code , jst is enabled by default in CMF using DISTRO_FEATURES.<\/span><\/li><\/ul><div class=\"table-wrap\"> <table class=\"relative-table confluenceTable\"><colgroup><col style=\"width: 100.0%\"><\/colgroup><tbody style=\"margin-left: 40.0px\"><tr><td class=\"confluenceTd\"><p>File : meta-rdk\/conf\/distro\/include\/rdkb.inc<span><br>DISTRO_FEATURES_append = &#8221; webui_jst&#8221;<\/span><\/p><\/td><\/tr><\/tbody><\/table> <\/div><ul><li><strong><span>Recipe files in source code<\/span><\/strong><span><br>meta-rdk-broadband\/recipes-ccsp\/ccsp\/<a href=\"https:\/\/code.rdkcentral.com\/r\/plugins\/gitiles\/rdk\/components\/generic\/rdk-oe\/meta-rdk-broadband\/+\/refs\/heads\/rdk-next\/recipes-ccsp\/ccsp\/ccsp-webui-jst.bb\" class=\"external-link\" rel=\"nofollow\">ccsp-webui-jst.bb<\/a><br>meta-rdk-ext\/recipes-support\/duktape\/<a href=\"https:\/\/code.rdkcentral.com\/r\/plugins\/gitiles\/rdk\/components\/generic\/rdk-oe\/meta-rdk-ext\/+\/refs\/heads\/rdk-next\/recipes-support\/duktape\/duktape_2.2.0.bb\" class=\"external-link\" rel=\"nofollow\">duktape_2.2.0.bb<\/a><br>meta-rdk-broadband\/recipes-ccsp\/ccsp\/<a href=\"https:\/\/code.rdkcentral.com\/r\/plugins\/gitiles\/rdk\/components\/generic\/rdk-oe\/meta-rdk-broadband\/+\/refs\/heads\/rdk-next\/recipes-ccsp\/ccsp\/jst.bb\" class=\"external-link\" rel=\"nofollow\">jst.bb<\/a><\/span><\/li><li><strong><span>Webui jst source code is available at <\/span><\/strong><span>rdkb\/components\/opensource\/ccsp\/webui\/source\/Styles\/xb3\/jst<\/span><\/li><li><strong><span>Files in GW<\/span><\/strong><\/li><\/ul><p><span>jst file path &#8211; \/usr\/www2<br>css, img, js, syndication partner logo &#8211; \/usr\/www2\/cmn\/ <br>set actions are handled in \/usr\/www2\/actionHandler<br>javascript implementation for php api &#8211; \/usr\/www2\/includes\/php.jst<\/span><\/p><ul><li><span>&#8220;\/etc\/webgui.sh&#8221; will modify &#8220;\/etc\/lighttpd.conf&#8221; on runtime and create &#8220;\/tmp\/lighttpd.conf&#8221;<\/span><\/li><\/ul><p><br><\/p><p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to WebUI WebUI is a graphical user interface that is available to the connected [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":0,"parent":9575,"menu_order":32,"comment_status":"open","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-9778","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WebUI Migration to jst - RDK Documentation Portal | Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WebUI Migration to jst - RDK Documentation Portal | Documentation\" \/>\n<meta property=\"og:description\" content=\"Introduction to WebUI WebUI is a graphical user interface that is available to the connected [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/\" \/>\n<meta property=\"og:site_name\" content=\"RDK Documentation Portal | Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-25T05:18:34+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/\",\"url\":\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/\",\"name\":\"WebUI Migration to jst - RDK Documentation Portal | Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/developer.rdkcentral.com\/documentation\/#website\"},\"datePublished\":\"2022-06-21T13:53:09+00:00\",\"dateModified\":\"2025-03-25T05:18:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/developer.rdkcentral.com\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documentation\",\"item\":\"https:\/\/developer.rdkcentral.com\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"RDK Broadband\",\"item\":\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Components\",\"item\":\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"WebUI Migration to jst\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/developer.rdkcentral.com\/documentation\/#website\",\"url\":\"https:\/\/developer.rdkcentral.com\/documentation\/\",\"name\":\"RDK Documentation Portal | Documentation\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/developer.rdkcentral.com\/documentation\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WebUI Migration to jst - RDK Documentation Portal | Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/","og_locale":"en_US","og_type":"article","og_title":"WebUI Migration to jst - RDK Documentation Portal | Documentation","og_description":"Introduction to WebUI WebUI is a graphical user interface that is available to the connected [&hellip;]","og_url":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/","og_site_name":"RDK Documentation Portal | Documentation","article_modified_time":"2025-03-25T05:18:34+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/","url":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/","name":"WebUI Migration to jst - RDK Documentation Portal | Documentation","isPartOf":{"@id":"https:\/\/developer.rdkcentral.com\/documentation\/#website"},"datePublished":"2022-06-21T13:53:09+00:00","dateModified":"2025-03-25T05:18:34+00:00","breadcrumb":{"@id":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/developer.rdkcentral.com\/documentation\/"},{"@type":"ListItem","position":2,"name":"Documentation","item":"https:\/\/developer.rdkcentral.com\/documentation\/"},{"@type":"ListItem","position":3,"name":"RDK Broadband","item":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/"},{"@type":"ListItem","position":4,"name":"Components","item":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/"},{"@type":"ListItem","position":5,"name":"WebUI Migration to jst"}]},{"@type":"WebSite","@id":"https:\/\/developer.rdkcentral.com\/documentation\/#website","url":"https:\/\/developer.rdkcentral.com\/documentation\/","name":"RDK Documentation Portal | Documentation","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/developer.rdkcentral.com\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/pages\/9778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/comments?post=9778"}],"version-history":[{"count":3,"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/pages\/9778\/revisions"}],"predecessor-version":[{"id":11721,"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/pages\/9778\/revisions\/11721"}],"up":[{"embeddable":true,"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/pages\/9575"}],"wp:attachment":[{"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/media?parent=9778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}