{"id":22004166,"url":"https://github.com/electric-eloquence/feplet-vs-patternlab-php","last_synced_at":"2026-04-11T09:37:51.192Z","repository":{"id":40687650,"uuid":"122618664","full_name":"electric-eloquence/feplet-vs-patternlab-php","owner":"electric-eloquence","description":"Feplet (Node.js) vs. Pattern Lab (PHP)","archived":false,"fork":false,"pushed_at":"2023-03-04T02:34:41.000Z","size":2426,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-28T12:45:23.723Z","etag":null,"topics":["feplet","fepper","node","nodejs","pattern-lab","patternlab","php"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/electric-eloquence.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-23T12:28:36.000Z","updated_at":"2021-01-01T19:58:35.000Z","dependencies_parsed_at":"2023-01-26T08:46:22.660Z","dependency_job_id":null,"html_url":"https://github.com/electric-eloquence/feplet-vs-patternlab-php","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electric-eloquence%2Ffeplet-vs-patternlab-php","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electric-eloquence%2Ffeplet-vs-patternlab-php/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electric-eloquence%2Ffeplet-vs-patternlab-php/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electric-eloquence%2Ffeplet-vs-patternlab-php/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/electric-eloquence","download_url":"https://codeload.github.com/electric-eloquence/feplet-vs-patternlab-php/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245062725,"owners_count":20554802,"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":["feplet","fepper","node","nodejs","pattern-lab","patternlab","php"],"created_at":"2024-11-30T00:12:27.108Z","updated_at":"2025-10-30T00:23:37.572Z","avatar_url":"https://github.com/electric-eloquence.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Feplet (Node.js) vs. Pattern Lab (PHP)\n\n#### Update: 2020 February\n\nThis repository is primarily being maintained for the purpose of providing a \ntest bed on which to benchmark future versions of Feplet and Fepper. Two of \nPattern Lab PHP's main dependencies \n\u003ca href=\"#pattern-lab-php-latest-commits\"\u003ehaven't seen development since early 2018\u003c/a\u003e. \nThe rest haven't since 2016. In fact, Pattern Lab won't even run in PHP 7.4. On \nthe other hand, Fepper's continued purpose is to be aligned with the latest \ndevelopments in frontend technology. In other words, this shouldn't be seen as \njust a stark comparison between two \"Atomic Design\" systems. The comparison is \nlikely irrelevant in this day and age. Nonetheless, the old text of this readme \nwill be retained with occasional updates incorporating new information.\n\n### Abstract\n\nOn a high level, this is a Node.js vs. PHP comparison. However, this sort of \ncomparison never compares apples to apples. Going a bit lower, we can compare \ntwo applications that, when receiving identical inputs, will return nearly \nidentical outputs. We can then concern ourselves with the most basic of \nbenchmarks: processing speed and memory consumption. But since we don't know \nhow these applications work under the hood, we again cannot perform an even \ncomparison of Node.js and PHP.\n\nBut what we _can_ try to determine, is when considering what tools to use for \nbuilding a pattern library, processing large amounts of template data:\n\n* Whether to stay within the Node.js runtime environment, and use an obscure \napplication for this purpose.\n\n\\- or -\n\n* Whether to bring on an additional runtime environment, and all the overhead \nthat will incur, primarily because the better known application works in this \nenvironment.\n\n### Background\n\n\u003ca href=\"https://github.com/electric-eloquence/feplet\" target=\"_blank\"\u003eFeplet\u003c/a\u003e \nis the Node.js template engine which powers \n\u003ca href=\"https://fepper.io\" target=\"_blank\"\u003eFepper\u003c/a\u003e, which implements the \nPattern Lab UI.\n\nWhen we refer to the UI, we mean the client-side JavaScript, styles, and markup. \nThe UI, being browser-based, is independent of these tests.\n\nTo compile and render the markup which will be displayed by the UI, we need a \nruntime environment on the file system. Those opting to stay in the Pattern Lab \necosystem (i.e. not opting for Fepper, or similar independent application) will \nfind that the PHP version provides the best Pattern Lab experience. A Node.js \nversion of Pattern Lab exists, but its functionality is too limited for power \nusage. \n(\u003ca href=\"#pattern-lab-node\"\u003eMore on that later\u003c/a\u003e, if you're interested.)\n\nGiven that frontend developers and coding designers are certain to work in \nJavaScript (and probably Node.js), it is reasonable to assume that they don't \nautomatically want to bring on another runtime environment. They'd generally \nneed a drive of curiosity or a mandate to expand beyond Node.js for a given \nproject. We're only concerned with what could impart the mandate:\n\n* The Node.js application isn't up to the task.\n* The Node.js application is too slow.\n* The Node.js application consumes too much memory.\n\n### Versions\n\n* \u003ca href=\"https://github.com/electric-eloquence/fepper\" target=\"_blank\"\u003eFepper (main project)\u003c/a\u003e:\n  0.13.2\n* \u003ca href=\"https://github.com/electric-eloquence/fepper-npm\" target=\"_blank\"\u003eFepper-NPM\u003c/a\u003e:\n  0.34.5\n* \u003ca href=\"https://github.com/electric-eloquence/feplet\" target=\"_blank\"\u003eFeplet\u003c/a\u003e:\n  1.2.0\n* Pattern Lab: 2.0.0\n* Node.js: 12.14.1\n* NPM: 6.13.4\n* PHP: 7.3.14\n* Composer: 1.9.2\n\nFepper-NPM and Feplet are dependencies of Fepper. They are parts of the whole.\n\n### System\n\n* MacBook Pro (Retina, 15-inch, Mid 2015)\n* Intel Core i7-4980HQ @ 2.80GHz\n* 16 GB 1600 MHz DDR3\n* macOS Catalina 10.15.3 Host OS\n* VirtualBox 6.1.2 r135662\n* Ubuntu 18.04.3 LTS Bionic Guest OS\n\n### Tests\n\nThis Feplet/Fepper vs. Pattern Lab comparison really just tests their abilities \nat compiling and rendering templates—lots of them. At heart, this is really just \na template engine benchmark test.\n\nThe templates to be compiled and rendered are in the `source` directory under \neach respective application. These directories are identical. They each contain \n300 template files, and 77 JSON data files.\n\n### Benchmarks\n\nAverages of ten runs:\n\n#### Feplet/Fepper\n\n* Time: 5.4513 sec\n* Memory: 89.067 MB\n\n#### Pattern Lab PHP\n\n* Time: 8.75 sec\n* Memory: 312 MB\n\n### Analysis\n\nPHP 7 is fast—almost always faster than Node.js at synchronous brute \ncalculation. This can be verified by a quick Internet search. We do not wish to\ntangentially replicate or cite those tests, but if we're wrong about this, \n\u003ca href=\"https://github.com/electric-eloquence/feplet-vs-patternlab-php/issues\" target=\"_blank\"\u003e\nplease post an issue\u003c/a\u003e citing the appropriate correction.\n\nHowever, developers generally do not choose Node.js for speed alone, and \nparticularly not for speed at synchronous brute calculation. But templating _is_ \npurely synchronous, and is effectively brute calculation. Fortunately for those \nwishing to stay in Node.js, Fepper is reliably faster than Pattern Lab PHP.\n\nHowever, there is a strong case to Pattern Lab having name recognition. This \nadds to PHP's already strong case based on its synchronous performance, not to \nmention its ubiquity.\n\nBut understand the overhead you'll take on if you go the PHP route. You will \nneed to access Pattern Lab's API through your OS's shell. Windows? Mac? Linux? \nOther Unix-like? Then, you will most likely execute those shell commands in a \nNode.js task runner via gulp, npm scripts, etc. Even if cross-platform and \ncross-language shell execution is not a problem, it is nowhere near as seamless \nand extensible as requiring a JS module from within Node, and configuring, even \nextending, your instances as you see fit.\n\nThere are also unexpected consequences of installing PHP in the first place. \nThese tests were conducted in Ubuntu. These commands were used for the install:\n\n```shell\nsudo add-apt-repository ppa:ondrej/php\nsudo apt-get update\nsudo apt-get install php7.3\n```\n\nWe did indeed get PHP 7.3.14, but we also got Apache2. Not only that, Apache2 \nwas running and listening on port 80!\n\n### Do It Yourself\n\n```shell\ncd fepper\nnpm install # only need to do this once.\nnpm start\ncd ../patternlab-php-2.0.0\ncomposer install # only need to do this once.\nphp core/console --generate --patternsonly\n```\n\n### Footnotes\n\n#### Pattern Lab Node\n\nA version of Pattern Lab exists for Node.js, but it isn't up to the task for \nthese tests. Trying to build the following will result in an infinite loop:\n\n##### source/\\_patterns/04-pages/page.mustache:\n\n```handlebars\n{{\u003e templates-node(full: true) }}\n```\n\n##### source/\\_patterns/03-templates/node.mustache:\n\n```handlebars\n{{# full }}\n  {{\u003e organisms-full }}\n{{/ full }}\n\n{{# teaser }}\n  {{\u003e organisms-teaser }}\n{{/ teaser }}\n```\n\n##### source/\\_patterns/02-organisms/full.mustache:\n\n```handlebars\nFULL CONTENT\n\n{{\u003e templates-node(teaser: true) }}\n```\n\n##### source/\\_patterns/02-organisms/teaser.mustache:\n\n```handlebars\nTEASER CONTENT\n```\n\n```shell\ncd ../patternlab-node-3.0\nnpm install # only need to do this once.\nnpm run pl:build\n# ctrl+c to stop infinite loop.\n```\n\nThis isn't an edge case, nor should it be forbidden. Drupal, for example, \nrecurses through templates in this circular manner. A full Drupal node view can \ninclude teasers of other nodes. Feplet and Pattern Lab PHP also respect the \nconditions that determine which recursion paths to take and not take.\n\nAlternate template engines can be plugged into Pattern Lab Node, but don't \nexpect the first few tries with them to work as intended. Furthermore, there is \nlittle to no documentation for such usage.\n\nIneffective use of tools like Pattern Lab invariably leads to questions like, \n\"What is the payoff for all this increased upfront cost?\" No, \"Atomic Design\" \nand \"Prototyping\" are not payoffs—one is a methodology, and the other is \nincreased upfront cost!\n\n#### As of 2020 February:\n\n##### Pattern Lab PHP latest commits:\n\n\u003ca href=\"https://github.com/pattern-lab/patternlab-php\" target=\"_blank\"\u003ehttps://github.com/pattern-lab/patternlab-php\u003c/a\u003e: 2016 Jul  \n\u003ca href=\"https://github.com/pattern-lab/patternlab-php-core\" target=\"_blank\"\u003ehttps://github.com/pattern-lab/patternlab-php-core\u003c/a\u003e: 2018 Feb  \n\u003ca href=\"https://github.com/pattern-lab/patternengine-php-mustache\" target=\"_blank\"\u003ehttps://github.com/pattern-lab/patternengine-php-mustache\u003c/a\u003e: 2016 Jun  \n\u003ca href=\"https://github.com/pattern-lab/styleguidekit-mustache-default\" target=\"_blank\"\u003ehttps://github.com/pattern-lab/styleguidekit-mustache-default\u003c/a\u003e: 2018 Jan  \n\u003ca href=\"https://github.com/pattern-lab/plugin-php-reload\" target=\"_blank\"\u003ehttps://github.com/pattern-lab/plugin-php-reload\u003c/a\u003e: 2016 Jul  \n\n#### Also: \u003ca href=\"https://github.com/electric-eloquence/template-engine-benchoff\" target=\"_blank\"\u003eFeplet vs. Handlebars\u003c/a\u003e\n\n#### Thanks for Visiting!\n\nAll tools used in this test (with the exception of Apple and Intel products) are \nOpen Source.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectric-eloquence%2Ffeplet-vs-patternlab-php","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felectric-eloquence%2Ffeplet-vs-patternlab-php","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectric-eloquence%2Ffeplet-vs-patternlab-php/lists"}