React-like application development with high performance and DevX -> Try Bobril

Tomáš Růt — Wed, 22 Jan 2020 12:22:37 +0000

Intro

It's been a few years since I published my first articles about Bobril. Since that time, bobril has evolved and from a simple framework has become a great tool for developing (not only) web applications that are used as a basis for many enterprise products.

I wrote this post to share with you the opportunity to test application development as you know it with React and more easily.

What is Bobril

Bobril is a TypeScript react-like framework focused on developing single-page web applications. It is developed and massively used daily by more than 200 Quadient developers under the supervision of chief development architect https://github.com/Bobris. The ease of creating a project, the speed, culture handling, easy on-boarding and focus on all the classic features a developer needs for an application capable of production deployment, those are features of bobril.

It can also be used to develop PWA, mobile applications with e.g. cordova etc.

How to create a project

Unlike other frameworks, starting to develop applications that meet all of the above is quite simple. All you need to do is to run three classic npm commands to initialize a package, install a bobril and bobril-build:

npm init
npm i bobril --save
npm i bobril-build -g

Then just create index.tsx with simple code

import * as b from "bobril";

interface IHelloData {
  name: string;
}

class Hello extends b.Component<IHelloData> {
  render(): b.IBobrilChildren {
    return (
      <>
        <h1>Hello {this.data.name}</h1>
        <p>
          This is your first <strong>bobril</strong> application.
        </p>
      </>
    );
  }
}

b.init(() => <Hello name="Developer" />);

and run build using the command

bb

At this point, your application is already running at http://localhost:8080, the build is monitoring the code changes and then immediately re-updates according your current change - and nothing more for maximum speed. Bobril-build solves everything you need - compilations, polyfills, imports, minification, uglification, dead-code removal, type declarations, assets, translations, styling, importing external libraries, running jasmine tests etc. - everything works out of the box. It alse creates a basic tsconfig.json so your IDE, e.g. the recommanded Visual Studio Code, is able to check your code etc.

You can see that finally standard TSX is used as you know it from React.

To explore more examples visit bobril.com

And why is it interesting?

React-like

If you have experience in application development in react, using bobril will be peace of cake. Like react, it works on the principle of virtual DOM comparison, uses TSX (type-safe JSX), supports hooks and other features.

Type safe

Bobril and its applications use TypeScript, which ensures compile-time code safety and minimizes runtime problems.

Component-based

Individual parts of the application are created as components - both statefull class components or stateless functional components. The components are imported in the standard way. They may also contain examples.

Power

Optimized for high speed, small size and great developer experience.

Opinionated

Bobril has been used for many years in the production environment of applications developed in Quadient, so it is already distributed with the full framework ecosystem needed to develop complete production-ready applications:

bobx or bobflux for state management
bobril-g11n for translations
bobril-build for build your application with all necessary features
bobrilstrap for UI components based on bootstrap
bobril-m for UI components based with material look

Bobril is definitely worth a try and for more information on how it works, visit his website at bobril.com

Thanks for your reading and enjoy bobril!

DEV Community: Tomáš Růt