DEV Community: Darshan Rander

Serverside Dart

Darshan Rander — Thu, 17 Nov 2022 14:17:37 +0000

Hey everyone!

Some of you might be thinking "What is Dart?" - it is a strongly typed, object-oriented programming language developed by Google.

A lot of you might be confused if you can use Dart for the backend - Yes, you can write a backend server in almost all languages.

In this blog, I will talk about the benchmarks of Flask (Python), Express (JavaScript), Shelf (Dart), dart_frog (Dart) and Conduit (Dart), and my opinions on Dart on the server side.

Benchmarks

The code for the benchmarks is at SirusCodes/backend_benchmark. Please open an issue if you find any issues in the benchmarks.

I got the below results by running the benchmark and servers on an AWS t3a.small instance running Ubuntu 22.

The benchmarks are testing backends on 4 bases

Synchronous request handling
Asynchronous request handling
Multi-part requests (File upload)
JSON parsing

Lesser means better

Synchronous request handling

In this, the client sends a request to the server then waits for the response and then sends another.

The lowest time taken was by Shelf which is still comparable with other frameworks

Asynchronous request handling

In this multiple requests are sent to the server and waits for all the responses back from the server.

GET requests

The fastest one was ExpressJS but again with not a great margin.

POST requests

Here Flask is the fastest and Dart servers perform a bit slower and conduit is the slowest of all.

Multi-part requests (File upload)

The multipart requests are usually made to upload images to a server. In this, I'm sending requests synchronously.

The Dart servers are handling it very slowly. Flask and ExpressJS are killing it.

dart_frog doesn't support it yet, you can track the progress at dart_frog#296.

The Shelf also doesn't provide out-of-the-box support for it but I have used shelf_multipart (a 3rd party package) to handle requests.

JSON parsing

In this, I'm stress testing the speed of JSON parsing by frameworks. By sending 1.04MB of JSON data over POST request synchronously.

Again you can see Flask and express are twice as fast as Dart frameworks.

In real world no one will be sending such huge chunks of JSON over the network but these are just for benchmark sake

By looking at the benchmarks we can say Dart servers have similar speeds when compared to other frameworks but there is a scope for improvement in multipart requests and in parsing high volumes of JSON data.

Why should you care?

These Dart frameworks are pretty new and got some traction in recent years. They will grow and will be much better than now but it will take time.

Frameworks	Release
Flask	April 2010
Express	November 2010
Shelf	April 2014
dart_frog	May 2022
conduit	April 2021

As you can see above these Dart frameworks competing with the grand old daddies of backend frameworks and still performing decent is a win for me.

Sure currently they are not the best but with time they will surely improve.

Should you give Dart a try?

Absolutely Yes! Dart is a simple language with a very smooth learning curve.

If you like challenges then exploring the serverside of Dart will provide you with enough challenges as it's new and you will learn a lot along the way. I would recommend you use shelf as it least abstracted framework of all.

It can be a good side project for you if you are already using Dart for Flutter then you can easily start building without any other dependencies.

Also, it can bring your Backend and Frontend (Flutter) in the same language.

The development in the Dart server space is very active. While developing for benchmarks I found a small issue with dart_frog which got fixed in a day.

My opinions

What am I interested in?

Serverpod looks interesting as well. I liked the idea of having a lot of integration out of the box. I tried to build it but it doesn't support windows yet🥲

The roadmap of dart_frog is pretty interesting. I'm looking forward to the client generation which is also supported by Serverpod.

Production?

If you are trying to get something up and running quickly then I don't feel Dart is a good option here. As currently there are not easy cloud integrations and not so many resources to help you with any issues you face.

If it's a small side project with an expected user base of thousands then go ahead with Dart.

Final words

Dart backend might not be the best option for production applications now but it’s a to thing keep an eye at.

All the above charts are made with copyicon.com

Stocker - An Inventory Sales management app made using Flutter and Appwrite

Darshan Rander — Thu, 12 May 2022 20:35:27 +0000

Overview of My Submission

The inspiration for this app comes from my uncle. He owns a store and managing inventory for him was becoming more and more difficult for him. So he asked me to build an app for him but initially I couldn't find motivation to work on it. But this hackathon helped me to give the motivation and work on the project.

So the major goal of this project is to manage inventory and sales of the products.
All the products are divided into categories for better segregation.
Also the app takes customer info like name, email and number so we can send invoices to them(sending of invoices is not completed at the time of writing the post)

The app is made with the latest Google's Material You themed widgets.

Submission Category:

Mobile Moguls

Link to Code

SirusCodes / stocker

Stocker

It is an inventory and sales management app made using Flutter and Appwrite.

This project is made for #appwritehack submitted at here.

Video

Screenshots


Home page which lists categories	Home page in light theme	Search page where you can search for products irrespective of categories

Shows stats about your sales and profits	More options for app	User profile to change password

Transaction history with option to filter by all, buy or sell	Page to add new categories	Color picker to pick a color for category

Page to add new products	Product and categories can be sorted alphabetically	Add product in cart

Once a product is created a floating action will be present on all screens to move for checkout	Checkout page	Other details will be auto-filled as soon as you selects a phone number

You can either add discount by percentage or a specific amount by clicking

…

View on GitHub

Additional Resources / Info

Video

Screenshots



Home page which lists categories	Home page in light theme	Search page where you can search for products irrespective of categories

Shows stats about your sales and profits	More options for app	User profile to change password

Transaction history with option to filter by all, buy or sell	Page to add new categories	Color picker to pick a color for category

Page to add new products	Product and categories can be sorted alphabetically	Add product in cart

Once a product is created a floating action will be present on all screens to move for checkout	Checkout page	Other details will be auto-filled as soon as you selects a phone number

	You can either add discount by percentage or a specific amount by clicking on icon

Part 1 - TODO app UI building using Flutter

Darshan Rander — Fri, 25 Dec 2020 12:36:20 +0000

👋 Everyone!

Welcome to the 1st part of the Flutter TODO app-building series. In this article, we are going to build the main screen on which all the TODOs from a user are shown.

To know more about the project you can go to Introduction article.

This article is complementary to the video series on YouTube, so if you are more of a video person then you can go and watch the video 👇👇

Breaking The UI Into Parts.

How a user will look at it	How a DEV should look at it

Each part is marked with a number and I have explained what they are and which widget I have used in Flutter.

So as you can see that we have Scaffold as the parent and then we have appBar, body, and floatingActionButton.

We have an AppBar in which we have a title property which is a type of Widget so we use a Text widget.
On the trailing(actions) side of the AppBar we have an IconButton which on clicking will log the user out of the app.
Moving to body we can see that the date button and our TODO list are vertically aligned, so which widget we can use for this? Yes, you have guessed it right we are going to use a Column so the first child is a simple TextButton (Added in Flutter 1.22).
Next child in our Column will be ListView to be specific as we are going to add data dynamically so we need to use a ListView.builder (This works like a RecyclerView in Android).
Inside our ListView.builder each child is a Dismissible so that the user can dismiss them to delete. Card is the child of it which gives it an aesthetic look and child is a ListTile.
Getting to ListTile we have title which also takes the type of Widget so again we are using a Text widget.
Just below the title we have a description and date of creation. ListTile also has a property for this which is subtitle again you have guessed it we need a Widget but this time we are going to pass a Column not a Text widget because we need to have them vertically aligned. Next in Column, we have 2 Text widget that is for description and date of creation.
To the left end we have an Icon, to get this we add leading in ListTile that is an IconButton.
To the right end we have again an icon but this time it is a simple Icon which is in the trailing of ListTile position.
Finally we have a FloatingActionButton with an Icon as a child.

Oof, this was so looonnng!!, now that you can read the UI we can start building it!! 🎉

It's CODE TIME!!!

First of all, we are going to start by making a StatefulWidget.

class TODOScreen extends StatefulWidget {
  TODOScreen({Key key}) : super(key: key);

  @override
  _TODOScreenState createState() => _TODOScreenState();
}

class _TODOScreenState extends State<TODOScreen> {
  @override
  Widget build(BuildContext context) {
    // We are going to start building here
  }
}

Then we can work on Scaffold

return Scaffold(
      appBar:    // This is where we are going to add our `AppBar`, 
      body:    // This is where most of the code will go,
      floatingActionButton:   // This is where we will add `FloatingActionButton`,
);

For the AppBar we will have a title property and also in action we will have IconButton for logout

appBar: AppBar(
  title: Text("My TODO app"),
  actions: [
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.exit_to_app),
    )
  ],
),

In the body, we have Column which contains TextButton and ListView.builder.

body: Column(
  children: <Widget>[
    // Here we will have `TextButton` and `ListView.builder`
  ],
),

For time being we can just make a simple button with a Placeholder text, then we can work on logic and show the actual date.

TextButton(
      onPressed: () {},   // Here we will call `DatePicker`
      child: Text("Date"),    // In place of "Date" we will add the date which is selected
),

Below the button, we have our ListView.builder

We need to make shrinkWrap as true in ListView.builder since it is inside a Column otherwise this will shower you with errors (I hope you don't like them😉) and will make itemCount as 3.

ListView.builder(
      shrinkWrap: true,
      itemCount: 3,
      itemBuilder: (context, index) {
            // Here we have to return our list item
      },
)

To make our Tasks(items in ListView.builder) have swipe to delete we need to start by wrapping it with a Dismissible which will give us properties such as direction to select the direction of dismissing, background which is stacked behind the child of Dismissible and only show up when the child is swiped.

Dismissible(
  // This should be unique for each item hence we are using index
  key: ValueKey(index),  
  // As written above this will be stacked behind the `child`
  background: Container( 
    alignment: Alignment.centerLeft,
    color: Colors.red,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Icon(Icons.delete),
    ),
  ),
  direction: DismissDirection.startToEnd,  // Only allow to swipe in reading direction
  child:   // Widget which is actually shown on screen
);

For the child we are going to have a Card -> ListTile then we can add:

title which will show task title
subtitle which will be a Column and have task description and created date
leading which will be an IconButton to show which task is completed and mark a task as completed
trailing which will be an Icon

Card(
  child: ListTile(
    leading: IconButton(
      onPressed: () {},
      icon: Icon(Icons.check_circle_outline_outlined),
    ),
    trailing: Icon(Icons.arrow_forward_ios),
    title: Text("Title"),
    subtitle: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text("Desc"),
        Text("Date"),
      ],
    ),
  ),
),

What you can see on your screen?... Yes, this looks kinda weird, Let's fix it.
To fix it first we need to remove the default margin from Card.

Card(
  margin: const EdgeInsets.all(0.0),
  .
  .
),

Now cards are sticking to each other. This could be easily solved by wrapping Padding around Dismissible.

return Padding(
  padding: const EdgeInsets.all(8.0),
  child: Dismissible(
  .
  ),
),

Yes, this looks much better😍

Finally, we can work on our FloatingActionButton! It has a single child which is an Icon.

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
),

Congratulations you have completed your UI building!! 🎉🥳

Adding Some Logic

Now we can add some logic to change the date which was in the TextButton.

Remember I told you that in place of "Date" we can put the actual date? Now we are going to work on that.

Let's start by making an instance variable in our State class and initializing it with DateTime.now() which will assign it today's date.

DateTime _date = DateTime.now();

Now we need to format our _date variable and show it to users. For this, we are going to use a package from pub.dev named intl into pubspec.yaml.

dependencies:
  # Other dependencies
  intl: ^0.16.1

intl gives us a lot of formatting options you can look at them by yourselves over here.

For formatting date, we are going to pass _date to format method from DateFormat class which will format it.
We can now replace the "Date" with it so the user will get a clear idea of which tasks are for user on which date.

TextButton(
  onPressed: () {},
  child: Text(
    DateFormat("dd/MM/yyyy").format(_date).toString(),
  ),
),

Now as the user can see the date they also might want to change, so we are going to implement a date picker in it. As material library already gives a date picker we are going to use that. For that, we will make another method in our class.

_showDatePicker() async {
  // To make a variable with today's date as we are going to use it a lot of time
  final today = DateTime.now(); 
  // This will return a `Future<DateTime>` hence we are awaiting it.
  final selectedDate = await showDatePicker(  
    context: context,  // We get it from the `State` class
    initialDate: _date,  // This is the date which is selected in the date picker
    firstDate: DateTime(2020, 11, 1),  // This is the start range in date picker which is selectable
    lastDate: DateTime(today.year + 1, today.month, today.day),  // This is the end range in date picker which is selectable
  );
  // if user have selected any date and selected date and current date
  // is not same then update the date and update the UI
  if (selectedDate != null && selectedDate != _date) {
    setState(() {
      _date = selectedDate;
    });
  }
}

As we have written the method _showDatePicker() we can call it when the user clicks on the Button.

TextButton(
  onPressed: () {
    _showDatePicker();
  },
  child: Text(
    DateFormat("dd/MM/yyyy").format(_date).toString(),
  ),
),

Woah you have completed your first screen!! 🎉

You can go over here to see the whole code.

Thanks for reading, if you wish you can also join our community on Discord.

See you soon! 👋 Happy Fluttering.

My Journey Of #100DaysOfCode

Darshan Rander — Sun, 06 Dec 2020 19:31:16 +0000

👋 Everyone

I completed my #100DaysOfCode challenge on the 15th of November, 2020.
Here is my experience with the 100DaysOfCode challenge.

TL;DR

It was an amazing experience, you should also try it.

Index

How I started
How you can start?
What I got from 100DaysOfCode
Problems that I faced
- I can't work daily😩
- Can't find proper resources🤦‍♂️
What I did in 100 days?
Final Thoughts

How I started

It all started with a reply on 👇

Shreyasi

@error404_sp

Great initiative! Anyone else up for this challenge? twitter.com/DevCommunityIN…

12:21 PM - 08 Aug 2020

Dev Community INDIA @DevCommunityIN
Hello Devs, We believe consistency and practice plays a important role in success. Hence We bring to you "The Weekly Steak Challenge"✨ So who all are excited for this challenge? https://t.co/zetH9skTFE

SirusTweets💙

@sirustweets

@error404_sp Let's try this🤔🤔

12:50 PM - 08 Aug 2020

How you can start?

Rules are pretty simple.

Just start with what you want to learn or explore. I started it because I wanted to be consistent with my DEV work and explore new technologies.

What I got from 100DaysOfCode

I have done a lot in these 100 days.

Learned a bit of Django and DRF(Django Rest Framework)
Made some cool animation in Flutter
Connected with a lot of cool people on Twitter
Pushed my boundaries

It was such an amazing experience!

Problems that I faced

I can't work daily😩

The main problem which we all might face is we may get bored/tired and drop out of the challenge. In my opinion, just try and push yourself for a week or two then eventually you will develop a habit to work daily.
TBH, I was very greedy, but this greed helped me a lot. It helped to work even when I was feeling very sleepy - I would not recommend this to anyone, good sleep is necessary
I needed to push myself to work for an hour daily, eventually, it became a habit and now it is hard to break. Either I'm coding or I'm learning new concepts through articles, YouTube, or GitHub issues.

Can't find proper resources🤦‍♂️

Many may say it's just an excuse, but sometimes it is really hard to find something you were looking for. I had some difficulty in finding resources for DRF but this playlist from Semy Colon helped me a lot.

What I did in 100 days?

Days	What I did
0 to 19	Learned Django and DRF at the surface level
20 to 22	Practiced some questions from HackerRank(I'm not really good at it)
23 to 25	Published a package on a flutter package named mobile_web_view
26	Made this CodePen on flutter
27 to 28	Worked on a website for college event using flutter web
29 to 43	Took a Flutter workshop on YouTube, Worked on my portfolio site(still incomplete😉), helped others.
44 to 55	Added animation in animated_text_kit(Flutter package) more about issue
56 to 62	HacktoberFest, CodePen, JavaFX
63 to 64	Published another package on pub.dev
65 to 73	College project(JavaFX), tried riverpod(https://riverpod.dev/)
74 to 82	Again worked on my portfolio site😅 and planned for a hackathon project.
83 to 85	Worked on the hackathon project😩
86 to 100	College project, YouTube videos on flutter

If you want to see all of my tweets you can go on this search query
PS: It was very nostalgic for me to see my old tweets and write this🥺💙

Final Thoughts

100DaysOfCode challenge could be a really good start to learn, explore, and if you are trying to be consistent. But don't just stop after 100 days. After you have achieved one goal, set another one for yourself. Just keep on trying out new things, just don't limit yourself.

Flutter TODO app series! Introduction

Darshan Rander — Fri, 13 Nov 2020 11:37:37 +0000

👋 Everyone

Welcome to the series! I'm Darshan from CodeVengers and in this series, we are going to make a TODO app using Flutter, Firebase and Riverpod.

About The Project

Let me give you a brief overview of the project. In the project, we are going to make a 3 screen app. For each screen, I will cover how to look at the design and later we are going to build it. Then we will proceed to work on the backend with Cloud Firestore and Firebase Auth using Riverpod for state management.

Login	TODO Screen

In this screen, we have login with google or skip login which will register the user as anonymous.	The user's tasks are listed over here. The user can see their tasks by specifying the date.

Add/Update Task

In this screen, the user will add or update their Tasks.

Learning Something New Is Good!

For those who don't know what Riverpod is, it is a state management option that has a lot of similarities with Provider (our good old friend) as both are developed by the same person that is Remi Rousselet, so learning it would be a breeze if you already know Provider. You can go through the amazing documentation and Robert Brunhage has made an awesome video to explain all the different providers in Riverpod.

Yes, You Can Watch Videos!

These articles are complementary to our YouTube series so if you like to see the videos then you can consider subscribing to our channel as we are planning to not only bring Flutter but also tutorials on other technologies.

Thanks for reading, if you wish you can also join our community on Discord.

See you soon! 👋 Happy Fluttering.