{"id":16190236,"url":"https://github.com/apsavin/bnsf","last_synced_at":"2025-06-17T06:38:53.040Z","repository":{"id":17873596,"uuid":"20812317","full_name":"apsavin/bnsf","owner":"apsavin","description":"bem node single page application framework","archived":false,"fork":false,"pushed_at":"2016-10-13T13:46:04.000Z","size":240,"stargazers_count":43,"open_issues_count":18,"forks_count":4,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-17T05:13:29.780Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/apsavin.png","metadata":{"files":{"readme":"README.md","changelog":"history-api-fallback.blocks/app-kernel/app-kernel.browser.js","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-06-13T17:36:57.000Z","updated_at":"2022-11-07T15:00:05.000Z","dependencies_parsed_at":"2022-08-04T21:15:50.939Z","dependency_job_id":null,"html_url":"https://github.com/apsavin/bnsf","commit_stats":null,"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"purl":"pkg:github/apsavin/bnsf","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apsavin%2Fbnsf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apsavin%2Fbnsf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apsavin%2Fbnsf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apsavin%2Fbnsf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apsavin","download_url":"https://codeload.github.com/apsavin/bnsf/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apsavin%2Fbnsf/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260302003,"owners_count":22988727,"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":[],"created_at":"2024-10-10T07:38:59.475Z","updated_at":"2025-06-17T06:38:53.003Z","avatar_url":"https://github.com/apsavin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bnsf - bem node single page application framework\n\n[![Build Status](https://travis-ci.org/apsavin/bnsf.svg?branch=master)](https://travis-ci.org/apsavin/bnsf) [![Bower version](https://badge.fury.io/bo/bnsf.svg)](http://badge.fury.io/bo/bnsf)\n\nFor FAQs and HOWTOs see [wiki](https://github.com/apsavin/bnsf/wiki).\n\nThere is an yeoman [generator](https://github.com/apsavin/generator-bnsf) for bnsf.\n\nFor usage example see [bnsf-project-stub](https://github.com/apsavin/bnsf-project-stub).\n\nFor more interesting usage example see [try-bem-online.net](http://try-bem-online.net), source code [here](https://github.com/apsavin/try-bem-online__front).\n\n# Why bnsf?\n\n- Shared routing and templates between browser and server\n- Single page application easily\n- SEO-friendly\n- Connect middleware compatible\n- JavaScript all the way\n- BEM stuff\n  - Methodology to rule the development process\n  - Well-structured file system\n  - CSS, JS, templates dependency management\n  - Asynchronous JS module system (no global variables)\n  - Semantic blocks for application building\n  - Build process out of the box (including CSS and JS minification)\n  - Unit tests easily (including tools for CSS/templates testing)\n\n\n## Shared routing and templates between browser and server\n\nbnsf uses [router-base](https://github.com/apsavin/router-base/) internally. It's a router, [inspired](http://symfony.com/doc/current/cookbook/routing/scheme.html) by Symfony 2 routing system, written in JavaScript, so it can work both on client and on server (node.js). \nIf you want to add a page to your application, you will need to specify a route for the page in YAML format:\n\n```yaml\n- id: main-page\n  path: /\n```\n\nSo, when user will open http://your-domain.com/, he will see the content of the main page. You need to create a template for the page into the folder of main-page block. bnsf uses `BEMTREE` and `BEMHTML` technologies for templates, so the simplest template looks like this:\n\n```javascript\nblock('main-page').content()('Hello world');\n```\n\nRouter and templates work both on the client and on the server, so if user somewhere into your application will click on the link to main page, he will see the content of it without page reloading.\nIn order to avoid copy-paste and hard code, router supports urls generation, both in templates:\n\n```javascript\npath('main-page') // returns \"/\"\n```\n\nand in client or server JavaScript code:\n\n```javascript\nrouter.generate('main-page'); // returns \"/\"\n```\n\n## Single page application easily\n\nWrite your code once, use everywhere. Templates, routing and your JavaScript code are shared between the client side and server side, but it's smart sharing: you always can specify, which code should be only on client, which code should be only on server and which should run on both sides of your application. The same with routes.\nApplications, written on top of bnsf, are views only. You will need to write some part with http API separately, using any language: it can be another node.js server, PHP application or even Go server. Such architecture gives you all pros of separation View from Data. You can read more in awesome article from Nickolas Zackas [here](http://www.nczonline.net/blog/2013/10/07/node-js-and-the-new-web-front-end/), but I want to specify a pair of advantages in the document:\n\n- Reuse of API server: one server for your web site, Android and iOS applications\n- Most changes of View are easy, because you don't need to change back-and logic\n\n## SEO-friendly\n\nWhen user directly types the url of some page of your site and press `Return`, the whole page is generated on the server. So, when search bot opens pages, bnsf behaves the same way, even if the bot can't understand JavaScript. Links on your site are just usual links, without any anchors, so bots can parse it without any difficulties. All content is available, always.\n\n## Connect middleware compatible\n\nbnsf uses connect www.senchalabs.org/connect/ under the hood, so you can use any of high-quality and well-tested connect middleware.\n\n## JavaScript all the way\n\nbnsf written in JavaScript. Your code should be written in JavaScript or any other language, that can be compiled to JavaScript. Your templates and router configuration files becomes JavaScript. And it's cool, because bnsf application can run everywhere, where JavaScript can run.\n\n## BEM stuff\n\nbnsf is a thin layer on top of [bem-core](https://github.com/bem/bem-core), main [BEM](http://bem.info) library, which provides JavaScript framework (i-bem), [ym](https://github.com/ymaps/modules) async modules system, [BEMHTML](http://bem.info/technology/bemhtml/2.3.0/rationale/) declarative template engine and other cool base stuff.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapsavin%2Fbnsf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapsavin%2Fbnsf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapsavin%2Fbnsf/lists"}