React-like application development with high performance and DevX -> Try Bobril
Tags: typescript, webdev, vdom, react
Published: 2020-01-22 12:22:37

## 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](Boris Letocha). 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`:

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

Then just create _index.tsx_ with simple code

```tsx
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

```bash
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](https://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](https://bobril.com) 

Thanks for your reading and enjoy **[bobril](https://bobril.com)**!