Skip to main content

Introduction

Binhjs will help you to build prototype of web applications quickly skipping complexity of massive JS ecosystems.

Focus on the core technologies (JS/CSS/HTML), but still concern modern concepts to enhance web experience.

Reduce effort since building custom tech stack is expensive 💸, time-consuming 📆 and deep learning curve 📚.

Instead, focus on implementation with JavaScript only, no need chasing trending tools which are changing fast.

Keep calm and stay with basic things serving purposes well. A language 💌 and a heart 🧡 will build them all.

I hope this framework will be a simple approach to web development, meanwhile, reducing the burden for developers.

Binhjs is still growing and in development, but usable at present. It is not supposed to be the best, yet good enough to rock. 🎸🤟

Fast Track 🧐​

Understand Binhjs by playing!

Install Node.js.

Install package binhend:

npm install binhend@latest

Create a new project:

npx binhend create frontend

Start the project:

npx binhend start frontend

Open http://localhost:1234.

Features​

Binhjs is built with high attention to the development experience.

  • 📦 Component-based:
    • Code logic is divided into modular, reusable, and self-contained components.
    • Not only for user interface (UI), services and styles can be also components.
    • Components can be composed of other components, enabling complex UIs to be built from simple, reusable parts.
  • ✂️ Immerse HTML/CSS into JavaScript:
    • Start writing HTML in JavaScript fashion, no actual HTML in UI components.
    • Import CSSes as style components to customize UI components.
  • 💚 Bundling & Lazy-loading:
    • Mechanism to provide both bundling and lazy-loading at the same time by default.
    • No configuration needs, just focusing on writting code for components.
    • Two options for building project: bundling or lazy-loading
      • The bundling is based on components and still ready for lazy-loading.
      • The lazy-loading fully requests and loads evey single component to webpage on demand.

Design principles​

  • Minimal APIs. Focus on simplicity and efficiency, reduce boilerplate code and make it easier to create and manage APIs.
  • Comprehension. Structure and codebase should be human-readable, not feel overwhelmed when adding new features; making it easy for anyone to understand and catch up with ease.
  • Common Choices. Common and popular approaches in web development might be done for users, so that they just need to build UIs and business logics.
  • Reusability. Components can be reused across different parts of an application or even across different projects, reducing the need to duplicate code.
  • Modularity. Encapsulation. Break down codebase into smaller, self-contained, and interchangeable components. Each component encapsulates its own logic helping in isolating functionality or responsibility, allowing for more manageable, maintainable, and scalable systems.
  • Testability. Components can be tested in isolation, which simplifies the testing process and improves the reliability of the application.
  • No vendor lock-in. Not required using anything to work along with Binhjs, choice of external resources will be entirely up to users.

Future Plan​

  • Enhance features for styling with CSS.
  • Apply PRPL Pattern
  • Apply framework for mobile app

Something missing?​

If you find issues or have suggestions on how to improve the documentation or the project in general, please send an email to me: binh.ng1195@gmail.com.

🧡 Thank you for reading!