SS Menu: A simple orders mgt. app for restaurants

Posted on — Leave a comment
SS Menu logo

More than 2 years ago, I created a lightweight point of sale system (POS) for our restaurant in Jalandhar called SkewerSpot (SS). I wrote the thing in under a week (cowboy coding, yodlee yodlee youdoo) in Ionic/Angular. Essentially, it’s a collection of hybrid mobile apps that allows a restaurant to manage orders in real-time via Firebase. The 3 apps in this collection are:

  1. SS Menu — to take orders
  2. SS Orders — to manage orders
  3. SS Stats — to view sales data

Nothing too complicated. The thing has been running quite reliably since 2.5 years. So why the rewrite?

Recently, Dad asked me to change a few things in SS Menu. When I got to working on the changes, I realized that my Ionic tooling had somehow become broken. I just couldn’t create new builds. I left it as is and informed Dad I didn’t have sufficient time to fix things around. But he insisted. So much that I finally decided to just rewrite the entire thing in a more modern mobile SDK — Flutter.

I donned my cowboy hat again and sat down to create the menu app from scratch using a skill I had just recently acquired. I think I was able to spit out a functional version of the app in 4-5 non-contiguous days. Creating in Flutter is such a blissful experience. I loved every bit of it.

Flutter makes it infinitely easy to create 100% custom interfaces inspired by designs at Dribbble. You are never crippled by the difficulty of customizing platform’s underlying UI controls. You are always in the driver’s seat.

— Me, after having created several Flutter apps based on designs at Dribbble

Unlike the last time, I created the app from day 1 with open-sourcing in mind. I also made sure that my git history was readable enough to help others starting in the world of Flutter learn quickly from my development experience.

But due to a lack of time, I had to make certain trade-offs: the code lacks automated tests, i18n, l10n and accessibility options. There’s also no iOS version as of now. What a bummer!

Check out the code and more details about the app on GitHub:

https://github.com/anuragbhd/ss-menu-app

Help me, if you can, take it to the next level by fixing the caveats and implementing TODOs.

Some screenshots to feast your eyes on:

  • Screenshot of Home screen
  • Screenshot of Home screen with an expanded section
  • Screenshot of Customize Item screen with option to pick a variant
  • Screenshot of Customize Item screen with option to choose from addons
  • Screenshot of Cart screen
  • Screenshot of Confirm Order screen

The charm of functional programming

Posted on — Leave a comment

While reading modern JavaScript code, you might have come across such things as Array.prototype.map(), Array.prototype.filter(), pure functions, higher order functions, the spread operator, etc. Basically, all the things that React and Redux made us write willingly or unwillingly. I am not going to spend the next 2-3 hrs going into finer details about FP. Instead, I am going to link you to 2 great articles I found on this topic.

Functional Programming (or FP) is a programming paradigm, a collection of guiding principles to write code in a particular style. Any developer who strongly adheres to this way of writing code will tell you that it eventually leads to code that is more readable, maintainable, testable and bug-free. In saying that, they would probably be right. Creating in React and GraphQL has made me a big fan of the declarative programming style. FP promotes declarative over imperative. Again, don’t worry too much about all the jargon. Once you’ve read the following articles, you’ll have a good understanding yourself.

FP is just one of multiple paradigm that JavaScript supports (other ones being event-driven, object-oriented and prototype-based; last two being forms of imperative paradigm). There are several other languages that support FP, most notably Haskell which supports ONLY the functional style. The currying technique is an essential ingredient in creating functional code, and is supported in a lot of modern languages including JavaScript.

Interestingly, there was a (famous?) guy named Haskell Curry who is the namesake of the language and the technique described above. Haskell. Currying. Get it?

Enough said!

Here are two excellent articles that introduce functional programming superbly. Read the first one first, after which all code examples in the second article will be immediately understood (really, Avi Aryan has done a great job with those examples).

Master the JavaScript Interview: What is Functional Programming?

Intro to Functional Programming: JavaScript Paradigms | Toptal

Dev Blabber Ep 2: Microservices in Practice (with Ashwat)

Posted on — Leave a comment

The Microservices architecture seems to be something that everyone is talking about but only few understand it well, let alone implement it and that too following all best practices. In this second episode, we are joined by a fellow DF member Ashwat to try and demystify the concept. Once we have the general definition out of the way, we’ll dissect a couple of real-world examples to see how the microservices architecture fits and solves their problems.

IRCTC, one of India’s most visited websites, is a great case in point. And so is Netflix, a company that sort of championed the use of this new architecture. We further discuss how the scaling cube works, and then take a look at decomposition, a key technique in deciding how to break a big application into micro services. Other topics discussed are bounded context, single responsibility principle (SRP), and common closure principle (CCP).

P.S. Apologies for the occasional background noise. Since this was a ‘live’ podcast, a few others from the DF community had joined to listen, learn, share and ask. I didn’t use the ‘mute by default’ setting because of which some mics made some noises. Will not happen from next time.

Meetup: Enterprise JavaScript Version 2

Posted on — Leave a comment
Enterprise JavaScript Version 2 poster

After 3 long months, we had the second edition of Enterprise JavaScript meetup. The first one was in June. It was an interesting meetup. 40-odd people signed up (RSVP’d) and 10 turned up. That’s a nearly 25% conversion rate. Not bad! Despite the small group size, we had a good time.

Enterprise JavaScript: Building Beautiful Modern UI/UX

In this second edition of our popular NCR meetup, we will learn to build elegant, professional and modern user interfaces and experiences. Do not miss out on the opportunity to hear from and interact with distinguished developers. Learn from real-world experiences of the speakers.

Meetup.com: Enterprise JavaScript – Version 2

Unlike the last time’s conference-style schedule, we had this time only 2 sessions:

Building Enterprise-ready Web Applications With OpenUI5 and Fiori by Nitish Mehta

Creating Beautiful Cross-Platform Apps With Flutter by Anurag Bhandari (me)

A relatively short schedule allowed us to go deeper into our respective topics and entertain more questions from the audience. Talking about the audience, we had a decently diverse group of enthusiasts and learners from undergrads to junior devs to project managers. They were all just lovely. We even had a foreign guest: a nice guy from South Korea 🇰🇷. That means we have international reach now, haha.

As usual, Nitish’s session was well-prepared and touched most aspects of this topic, OpenUI5. I personally learned a lot since (surprisingly) I had never heard of this UI framework before. Too much Bootstrap hypnotism?

As for the Flutter session, it was my first-ever attempt at teaching and evangelizing it in public. I loved doing that as much as I loved coding my showcase app. Oh yeah, it was a mostly hands-on session where we spun up a beautiful Health App in just over 60 mins (including learning Flutter and Dart stuff on the way). The full source code and tutorial of the app is in my GitHub repository.

Okay, I am done blabbering. Here are some pics:

Meetup: Enterprise JavaScript Version 1

Posted on — 1 Comment
Enterprise JavaScript Version 1 poster

As with a lot of other posts on my blog, this one is also delayed. I mean, A LOT delayed. The event happened in June, so you get the idea.

In Delhi/NCR, not a lot of software meetups happen. The scene is maturing but is not yet on par with the other techie cities such as Bangalore or Hyderabad. Again, not a lot of software meetups happen here and definitely not enough on JavaScript.

One tendency I’ve consistently observed in this region is developers’ reliance on jugaad. That is, they try to “duct-tape” their way through the code if they cannot find out the root cause in a reasonable amount of time. I know, we have all been there once. But this culture is less pronounced in technically more mature cities such as Bangalore.

When it comes to JavaScript, the attitudes are even worse. A lot of developers see it as a ‘scripting language used for validations in browser.’ Yes, some devs do realize the power of frameworks such as Angular, React and Ember in creating full-blown applications. Still, there’s a lot of us who do not see JavaScript itself as a first-class OOP programming language. That is simply tragic! So back in June I thought enough was enough and that this attitude toward JavaScript MUST change.

The opportunity to organize and curate a meetup themed on enterprise use of JavaScript came from Gaurav Gandhi, a great community builder, techie and AI geek. So I worked with him to organize this meetup, signed up a few speakers, and got the venue arranged.

From our consistent promotions on meetup.com, we got 400+ RSVPs! But going by our earlier experience, we weren’t expecting more than 30 (10% of total). Around 50 actually turned up. Man, that was no less than a mini-success.

Coming to the event’s agenda. We planned it as a sequence of conference-style talks by industry experts. For more, I’ll probably just copy-paste from our meetup.com page.

Enterprise JavaScript: Are You Using It THE RIGHT WAY?
Learn from startup journeys, hands-on exercises and product showcases

JavaScript is arguably the most popular programming language on planet[1] and yet a lot of us use it the WRONG way! But the blame is not entirely on you. With so many learning resources around — courses, blogs, tutorials, books, and what not — it’s hard to find the best place to start or improve. Most of these learning resources target a beginner audience. That is where the problem lies! In an attempt to be concise, they leave out the finer details that separate a good programmer from a bad one.

Don’t worry, we have all been there. Learning is a great way to improve. But is there a better way? Of course there is: it’s called “hands-on experience”.

In this special edition event of our popular NCR meetup, we bring to you that priceless experience in the form of 5 sessions. Do not miss out on the opportunity to hear from and interact with distinguished developers behind some massively scalable consumer and B2B apps. Learn from real-world experiences as speakers share their journeys on implementing NodeJS and client-side JavaScript at scale.
Learn to code in JavaScript and NodeJS the RIGHT way!

Meetup.com: Enterprise JavaScript – Journeys, Code Labs & Showcases

Here are some pics from the event:

Many thanks to 91springboard for generously sponsoring the venue and food. Kudos to all the wonderful speakers. And special thanks to all who came to attend, learn and share 🎉.