{"id":19544250,"url":"https://github.com/arif-rachim/yalla","last_synced_at":"2025-12-12T05:55:09.775Z","repository":{"id":57402935,"uuid":"82304318","full_name":"arif-rachim/yalla","owner":"arif-rachim","description":"YallaJS, ES6 Templating Engine.","archived":false,"fork":false,"pushed_at":"2017-12-29T10:57:46.000Z","size":1067,"stargazers_count":248,"open_issues_count":4,"forks_count":19,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-18T01:41:19.391Z","etag":null,"topics":["javascript-framework","lightweight","performance","virtualdom","yalla"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arif-rachim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-17T14:21:40.000Z","updated_at":"2025-02-11T15:49:10.000Z","dependencies_parsed_at":"2022-08-31T09:20:32.761Z","dependency_job_id":null,"html_url":"https://github.com/arif-rachim/yalla","commit_stats":null,"previous_names":["yallajs/yalla"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arif-rachim%2Fyalla","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arif-rachim%2Fyalla/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arif-rachim%2Fyalla/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arif-rachim%2Fyalla/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arif-rachim","download_url":"https://codeload.github.com/arif-rachim/yalla/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251026590,"owners_count":21525002,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript-framework","lightweight","performance","virtualdom","yalla"],"created_at":"2024-11-11T03:26:14.890Z","updated_at":"2025-12-12T05:55:04.748Z","avatar_url":"https://github.com/arif-rachim.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg align=\"center\" class=\"image\" src=\"http://yallajs.io/images/yallajs-bird.svg\" width=\"150px\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://travis-ci.org/yallajs/yalla\"\u003e\u003cimg src=\"https://travis-ci.org/yallajs/yalla.svg?branch=master\" alt=\"Build Status\"\u003e\u003c/a\u003e\n\u003ca href=\"https://codecov.io/gh/yallajs/yalla\"\u003e\u003cimg src=\"https://img.shields.io/codecov/c/github/yallajs/yalla.svg\" alt=\"Coverage\"\u003e\u003c/a\u003e\n\u003ca href=\"http://yallajs.io\"\u003e\u003cimg src=\"https://img.shields.io/website-up-down-green-red/http/yallajs.io.svg?label=yallajs.io\" alt=\"Build Status\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/yallajs/yalla/blob/master/package.json\"\u003e\u003cimg src=\"https://img.shields.io/david/expressjs/express.svg\" alt=\"Build Status\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/yallajs/yalla/tree/master/lib/yalla.min.js\"\u003e\u003cimg src=\"https://img.shields.io/github/size/yallajs/yalla/lib/yalla.min.js.gzip.svg\" alt=\"Build Status\"\u003e\u003c/a\u003e\n\u003ca href=\"https://travis-ci.org/yallajs/yalla\"\u003e\u003cimg src=\"https://img.shields.io/github/license/yallajs/yalla.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.codacy.com/app/yallajs/yalla?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=yallajs/yalla\u0026amp;utm_campaign=Badge_Grade\"\u003e\u003cimg src=\"https://api.codacy.com/project/badge/Grade/38475b57f7a043dbac929c67fb87f024\" alt=\"Codacy\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n----\n\n\n\u003cp align=\"center\"\u003e\n\u003cimg width='46px' src=\"http://browserbadge.com/ie/9\"\u003e\n\u003cimg width='46px' src=\"http://browserbadge.com/opera/20\"\u003e\n\u003cimg width='46px' src=\"http://browserbadge.com/safari/6\"\u003e\n\u003cimg width='46px' src=\"http://browserbadge.com/firefox/28\"\u003e\n\u003cimg width='46px' src=\"http://browserbadge.com/chrome/39\"\u003e\n\u003c/p\u003e\n\n**YallaJS** makes it easy to create HtmlTemplate and render it to DOM efficiently.\n\n```javascript\nimport {Context,render} from 'yallajs';\n\n// we pull html Tagged Template literals from the Context object.\nlet {html} = new Context();\n\n// create template function that produce HtmlTemplate \"\u003cdiv\u003eHello xxx \u003c/div\u003e\"\nlet hello = (name) =\u003e html`\u003cdiv\u003eHello ${name}\u003c/div\u003e`;\n\n// render \u003cdiv\u003eHello world\u003c/div\u003e to document.body.\nrender(hello('world'),document.body);\n\n// render \u003cdiv\u003eHello yallajs\u003c/div\u003e to document.body.\nrender(hello('yallajs'),document.body);\n```\n\n\n`yallajs`  has 3 main API\n\n 1. `render` : Render is a function that renders an HtmlTemplate or HtmlTemplateCollection into node.\n 2. `html` : html is contextual Tagged Template Literal that generates HtmlTemplate object from Html strings\n 3. `htmlCollection` : htmlCollection is contextual Tagged Template Literals that generates HtmlTemplateCollection for rendering arrays of object.\n 4. `Context` : Context is an object that stores local information such as HtmlTemplate cache (in most cases you dont have to do anything with this object).\n\n**Motivation**\n---\n\nThe original motivation of yallajs is perfectly described in this story :\n[How it feels to learn javascript in 2018](https://codeburst.io/how-it-feels-to-learn-javascript-in-2018-6b2cf7abb6aa)\n\n\u003eYallaJS hopes one day we will no longer need yallajs after the browser incorporates ES6 Templating library. \n\n\n\u003eAn example of a rewritten infamous angular Hero Editor tutorial using ES6 module and ES6 String Template\n\u003cimg class=\"progressiveMedia-image js-progressiveMedia-image\" data-src=\"https://cdn-images-1.medium.com/max/800/1*1VizDFqW5wzHrPKzVarE6w.gif\" src=\"https://cdn-images-1.medium.com/max/800/1*1VizDFqW5wzHrPKzVarE6w.gif\"\u003e\n\n*No babel, no transpiler, just your hand written ES6 straight into the browser stomach*\n\n\n`yallajs` has following main goals :\n\n1. Highly efficient in DOM creation, updates and deletion.\n2. Easy to use and very simple to understand\n3. Using web standards instead of creating new ones\n4. Very small size and no dependency.\n5. Support ES 5 browsers suchas IE 9, IOS 6 and Android 5.\n\n**How it works**\n---\n\n\n**`html` Tagged Template Literals**\n---\n`html` tag expression processed Template Literal, and generate HtmlTemplate object out of it.\nTemplate literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.\n\nTemplate literals are enclosed by the back-tick (\\` \\`) character instead of double or single quotes. Template literals can contain place holders. These are indicated by the Dollar sign and curly braces (${expression}). The expressions in the place holders and the text between them get passed to a `html` Tagged Template Literals.\n\n**`render` HtmlTemplate rendering**\n----\n`render()` takes a `HtmlTemplate`, `HtmlTemplateCollection`, `Text` or `Promise`, and renders it to a DOM Container. The process of rendering is describe in following orders :\n\n1. `yallajs` take the static strings in `HtmlTemplate` and join the strings with `\u003c!--outlet--\u003e` to mark the position of dynamic parts.\n2. `yallajs` passes joined strings to innerHTML to create `DOMTemplate`.\n3. It walks through the `DOMTemplate` and identify the comment tag `outlet`.\n4. On initial rendering `yallajs` update the `outlet` with actual values.\n5. After that `yallajs` store the updated `DOMTemplate` into `Context` object.\n6. Lastly `yallajs` clone the `DOMTemplate` to create `HtmlTemplateInstance` and append it to DOM Container.\n\nBy keeping the template DOM in the cache, next DOM creation will be done in two steps only :\n\n1. look the template DOM, and update the outlet with next value,\n2. clone the template DOM and append it to DOM Container.\n\nIn this way we can also perform the DOM update process very efficiently because we already know the location of the placeholder. So if there is a new value that changes, we simply update the placeholder without having to touch other DOM\n\n\n**Performance**\n---\nThe Benchmark result of yallajs 2.0 beta version is very promising. With very early stage of performance tuning, yallajs wins against angular, react and vue, both on rendering and memory allocation.\n Following benchmark result using \u003ca href=\"https://github.com/krausest/js-framework-benchmark\"\u003eStefan Krause performance benchmark\u003c/a\u003e.\n\n\u003cimg class=\"image\" src=\"https://docs.google.com/spreadsheets/d/e/2PACX-1vSjhBLod7UG28QeMS9I1WEmWW4o_RYO2a27GX4GhBW9cTBS_0i_N2FyGgaUsBavKq1KmnUMWRPhsPxm/pubchart?oid=106908939\u0026format=image\" \u003e\n\n\n**Memory**\n---\nOn the other hand, yallajs memory usage is showing very promising result.\n\n\u003cimg class=\"image\" src=\"https://docs.google.com/spreadsheets/d/e/2PACX-1vRBa5mvSRr6DdMYSZAsLOFowM7P5Jlo1pVRp6BwfyoYtrte3bcvxhIHuJ0Meg8gGMilTsGoSxIqvq9f/pubchart?oid=1555194057\u0026format=image\" \u003e\n\n\nYou can find the details \u003ca href=\"http://yallajs.io/benchmark-result.html\"\u003ehere\u003c/a\u003e, and the code that we use in this benchmark \u003ca href=\"https://github.com/yallajs/js-framework-benchmark/tree/master/yallajs-v2.0.0-keyed\"\u003ehere\u003c/a\u003e.\n\n\n**Features**\n---\n\nYalla uses ES 2015 String literal for html templating, yallajs API is very simple, making yalla js almost invisible in your code. This makes your application smells good and no boilerplate.\n\nOverview\n--------\n\n**hello world**\n---\nTo render hello world we can write as follows :\n\n```javascript\nrender(`Hello World`,document.body);\n```\n\nThe above code means we want to render 'Hello World' string into the body tag.\n\n**`render`**\n---\n`render` is a function that accepts 2 parameters, the first parameter is \nthe object to be rendered and the second parameter is the container where the object will be rendered.\n\nThe first parameter of `render` can be` string`, `boolean`,` date`, `number`,` Promise`, `HtmlTemplate` and` HtmlTemplateCollection`.\nThe second parameter is the DOM node, we can use `document.body` or` document.getElementById` for the second parameter\n\nTo render html we can pass it to the first parameter `HtmlTemplate` object by using tag `html` like the following example :\n\n```javascript\nrender(html`\u003cbutton\u003eHello World\u003c/button\u003e`,document.body);\n```\n\nThe above code means that we want to render the Hello World button to the document.body element.\n\n**`html`**\n---\n`html` tag behind the screen is an ES6 Template Tag.\n`html` generate HtmlTemplate object, which contains information about static strings, and dynamic values.\n`html` tag can be retrieved from ` yalla.Context` object.\n\n\u003e `yalla.Context` is the object that stores the cache of `html` and` htmlCollection` Tags. \nFor hybrid application cases where we can have multiple sub-applications (not single page app),\nwe can separate contexts from sub-applications by providing aliases of `html` and` htmlCollection` of each `Context`\n\n**Examples:**\n\nRendering `div` :\n```javascript\nrender(html`\u003cdiv\u003eThis is Div\u003c/div\u003e`,document.body);\n```\n\nRendering `html in html` :\n```javascript\nrender(html`\u003cdiv\u003eThis is Div ${html`\u003cdiv\u003eThis is Sub-Div\u003c/div\u003e`} \u003c/div\u003e,document.body);\n```\n\nRendering with expression :\n```javascript\nlet displayMe = false;\nrender(html`\u003cdiv\u003eThis is Div ${displayMe ? html`\u003cdiv\u003eThis is Sub-Div\u003c/div\u003e` : ''} \u003c/div\u003e,document.body);\n```\n\nWe can also listen to the DOM event by setting the value of `oneventname` with expression ` e =\u003e {} `\n\n**Events**\n---\n\nEvent in HtmlTemplate can be called by using callback expression `e =\u003e {}`.\nHere is an example to listen to the `onclick` event of a` button`.\n\n\n```javascript\n\nfunction buttonListener(){\n    alert('hello');\n}\n\nrender(html`\u003cinput type=\"button\" onclick=\"${e =\u003e buttonListener()}\"\u003eHello World\u003c/button\u003e`,document.body);\n```\n\nWe can also mempassing parameters into our callback.\n\n```javascript\nlet alertSomething = (something) =\u003e {\n  alert(something);\n}\n\nrender(html`\u003cbutton onclick=\"${e =\u003e alertSomething(e.target.innerText)}\"\u003eHello World\u003c/button\u003e`,document.body);\n```\n\nIn addition to Event, HtmlTemplate can also set values of attributes \u0026 styles using Template Literal.\n\n\n**Attribute \u0026 Style**\n---\n\nAttribute in HtmlTemplate can be set its value by using $ {}. \nFollowing is an example on how to set the value of the color and color attribute.\n\n```javascript\n\nlet dynamicColor = '#CCCCCC';\nlet fontSize = '32px';\n\nrender(html`\u003cdiv\n        style=\"color : ${dynamicColor};\n        font-size : ${fontSize};\" \u003eThis is a Node\u003c/div\u003e`,document.body);\n```\n\nAttributes can only render primitive object types such as `text`,` number` and `boolean`.\n\nIf you need a style attribute that has a combination of values, it is recommended to use the `style` tag.\n\nFollowing an example on how to use yalla in `style`\n\n```javascript\nlet fontColor = '#666666';\nlet backgroundColor = '#CCCCCC';\nrender(`\n\u003cstyle\u003e\n    .my-class {\n        color : ${fontColor};\n        background-color : ${backgroundColor};\n    }\n\u003c/style\u003e\n\u003cdiv class=\"my-class\"\u003eHello Class\u003c/div\u003e\n`);\n```\n\n\n**`htmlCollection`**\n---\nTo render an Array, we can use `Html Template Collection`. HtmlTemplateCollection is high performance Object that map array of items to HtmlTemplate Array.\nHtmlTemplateCollection requires key of the item to update the collection effectively.\n\nhtmlCollection has 3 parameters:\n\n```javascript\nhtmlCollection(arrayItems,keyFunction,templateFunction);\n```\n\n*Example*\n```javascript\nlet marshalArtArtist = [\n    {id:1,name:'Yip Man'},\n    {id:2,name:'Bruce Lee'},\n    {id:3,label:'Jackie Chan'}]\n\nrender(html`\n\u003ctable\u003e\n    \u003ctbody\u003e\n        ${htmlCollection(marshalArtArtist,(data) =\u003e data.id, (data,index) =\u003e html`\n            \u003ctr\u003e\u003ctd\u003e${data.name}\u003c/td\u003e\u003c/tr\u003e\n        `)}\n    \u003ctbody\u003e\n\u003c/table\u003e\n`,document.body);\n```\n\n**Advance**\n---\nFollowing is an advanced topic that can be used to extend yallajs.\n\n1. Promise :\n\nWe can call asynchronous process by using Promise. Promise by default is not supported by IE9, therefore\nto use this feature you should use a 3rd party libray like bluebird.js\n\nExample of how to use Promise :\n```javascript\nrender(html`\u003cdiv\u003e\n${new Promise(resolve =\u003e {\n    setTimeout(()=\u003e{\n        resolve(html`\u003cdiv\u003eThis will be visible after 1s.\u003c/div\u003e`);\n    },1000);\n})}\n\u003c/div\u003e`,document.body);\n```\n\n2. Manual content decorator with `Plug`\n\nPlug is a special function that will receive a callback function that contains the `outlet` object as its parameter.\nWith the object `outlet`, we can customize what content to be rendered to dom.\n\nHere is an example of using `plug`.\n\n```javascript\nrender(html`\u003cdiv\u003e\n${plug(outlet =\u003e {\n    // here we can put some logic to intercept and set our own content.\n    outlet.setContent(html`\u003cdiv\u003eThis is my custom content\u003c/div\u003e`)\n})}\n\u003c/div\u003e`,document.body);\n```\n\n\nSample Project\n--------------\n1. \u003ca href=\"http://yallajs.io/todomvc.html\"\u003eTodoMVC\u003c/a\u003e : a simple todomvc application\n2. \u003ca href=\"https://codepen.io/yallajs/project/editor/AxKoNY#0\"\u003eHero Editor\u003c/a\u003e : Hero Editor tutorial from Angular JS rewritten in Yallajs\n3. \u003ca href=\"http://yallajs.io/benchmark.html\"\u003eBenchmark\u003c/a\u003e : benchmark tools for measuring performance, fork of \u003ca href=\"http://www.stefankrause.net/wp/\"\u003eStefan Krause\u003c/a\u003e github project\n4. \u003ca href=\"https://codepen.io/yallajs/pen/vWjdqe\"\u003eReact Fiber Demo\u003c/a\u003e : React Fiber Triangle rewritten with YallaJS\n5. \u003ca href=\"https://codepen.io/yallajs/pen/wPpVNj\"\u003eSAM Pattern Todo\u003c/a\u003e : Example of how to use YallaJS with \u003ca href=\"http://sam.js.org/\"\u003eSAM Pattern\u003c/a\u003e\n\nBasic Example\n-------------\n1. \u003ca href=\"https://codepen.io/yallajs/pen/NwGpGZ\"\u003eHello world\u003c/a\u003e : Basic hello world application\n2. \u003ca href=\"https://codepen.io/yallajs/pen/POPppL/\"\u003eSimple Calculator\u003c/a\u003e : Simple calculator with yallajs\n3. \u003ca href=\"https://codepen.io/yallajs/pen/zpxpaY\"\u003eSVG - Sample\u003c/a\u003e : Showcase on using SVG with yallajs\n\nEvent Example\n------------\n1. \u003ca href=\"https://codepen.io/yallajs/pen/wPKdJo\"\u003eColor Picker\u003c/a\u003e : Simple color picker\n\nHtml Collection Example\n------------\n1. \u003ca href=\"https://codepen.io/yallajs/pen/BmzxvO\"\u003eArray with Html Collection\u003c/a\u003e : Using HtmlCollection to render arrays\n2. \u003ca href=\"https://codepen.io/yallajs/pen/gXQrgE\"\u003eHtml Collection with Promise\u003c/a\u003e : HtmlCollection with Promise\n\nAsync Example\n--------------------------\n1. \u003ca href=\"https://codepen.io/yallajs/pen/XzKqBb\"\u003eNode with Promise\u003c/a\u003e : Example using Promise on Node\n2. \u003ca href=\"https://codepen.io/yallajs/pen/eyNvNj\"\u003eAttribute with Promise\u003c/a\u003e : Example using Promise on Attribute\n\nPlug Example\n------------\n1. \u003ca href=\"https://codepen.io/yallajs/pen/YYXZRp\"\u003eNode With Plug\u003c/a\u003e : Example using Plug on Node\n2. \u003ca href=\"https://codepen.io/yallajs/pen/jYPBzK\"\u003eAttribute With Plug\u003c/a\u003e : Example using Plug on Attribute\n\nAminate.CSS\n-----------\n1. \u003ca href=\"https://codepen.io/yallajs/pen/VyvbVr\"\u003eAnimation.css\u003c/a\u003e : Example with Animation.CSS\n\n\nYallaJS Project is supported by :\n\n\u003cimg align=\"center\" class=\"image\" src=\"http://yallajs.io/images/browser-stack.svg\" width=\"150px\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farif-rachim%2Fyalla","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farif-rachim%2Fyalla","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farif-rachim%2Fyalla/lists"}