Binder: A web framework that can be used to create web apps and APIs

by Flutter Awesome

Binder Framework

Binder is a web framework that can be used to create web apps and APIs .

It’s like React + Express or any combination of front-end framework (Vue, Angular, etc.) and a back-end framework (Laravel, Django, etc.). All-in-one in a very simple and powerful way. Binder ? .

Get started

First of all, we need to download Binder SDK framework. If you are using windows , download it directly here . Add it (path to binder-sdk/bin ) in your Environment variable path .If everything is ok , if you type binder in your CMD it will work fine , so enjoy it .

Download Binder SDK :

–Windows

-MacOS (soon)

-Linux (soon)

Alternative (sdk/binder-bin) for others plaforms (linux and macOS users):,

You can use it by doing this:

Download Dart SDK from dart official website for your plaform and add binder-bin from binder github folder in the Dart SDK . Then, active it by doing dart pub global activate --source path binder-bin in the root. It works on all platforms .

Note :

If you already have an old dart sdk in your environment variable, please remove it before adding the binder one otherwise there will be a conflict. The SDK of binder already contains the SDK of Dart.

After the installation , you can use it

To create a new project , use :

binder create <project_name>

To run the project , use :

binder run

An example of project :

import 'package:binder/bootstrap.dart';

void main() {
  runApp(MyApp());
 
}

class MyApp extends Widget {
  @override
  Element toElement() {
    return BootstrapContainer(
      child: BootstrapCenter(
        child: BootstrapText('Hello World'),
      ),
    ).toElement();
  }
}

For flutter developers

Frontend :

If you have already used flutter, you know that flutter uses mainly two designs, the Material Design (eg: Center, TextStyle, Color, Icon) and the Cupertino (eg: CupertinoTextStyle, CupertinoIcons etc …).

  • For the flutter material (the most used) we import first package:flutter/material.dart and there we can use widgets like , AlertDialog , AppBar , Center , Color , TextStyle, DatePicker etc …

  • For the flutter cupertino (less used) we import first package:flutter/cupertino.dart and there we can use widgets like CupertinoAlertDialog , CupertinoButton ,CupertinoApp , CupertinoColors , CupertinoTextStyle, CupertinoDatePicker etc …

It is on this principle that the framework binder was created. With binder you have access to more than 4 approaches: Material , Materialize , Bootstrap , MBootstrap (MaterialBootstrap) .

  • For the Binder Material we will import first package:binder/material.dart and there we can use widgets like , Text , Center , Color , TextStyle, …

  • For the Binder Bootsrap we will import first package:binder/bootsrap.dart and there we can use widgets like , BootsrapText ,BootsrapCenter , BootsrapColor , BootsrapTextStyle, etc …

Same for Materialize and MBootstrap but not stable.

Message from the author :

Currently only Binder bootstrap is not very advanced, so for beta testers, I suggest it for now even if materialize also not bad. Bootstrap will be complete in the next few weeks. Thanks

Binder and the fullstack approach :

Binder allows you to manage not only the frontend but also the backend of your site.

  • To write front end, it’s in lib/main.dart .
  • To write backend , it’s in bin/server.dart .

For this release, it is not yet possible to create api and manage routing with your server but it will be possible in the next release.

A complete documentation will be published soon

You can use widgets like WebApp (similar to MaterialApp or CupertinoApp) , Divider , BoostrapColumn , BoostrapRow , BoostrapImage , BoostrapCenter , Center , Text , BoostrapText, etc …

100+ widgets are added or are being added actually .

In the documentaion you will see how to deploy your website , how to manipulate the routes , how to add your own html , css or javascript code , how to add firebase , mongodb or any other database .

If you want to contribute, soon it will be possible from the alpha version and once the official documentation is available.

Thank you for your future contribution.

GitHub

View Github