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

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 🎉.

Stop Blindly Following W3Schools!

Posted on Leave a comment

I started out learning to create websites by reverse engineering web pages that I found and liked online. The way I got started with CSS is an interesting story. I started developing static websites at a young age. I produced mostly ugly pages by myself and a wee-bit jazzy ones using something like Macromedia DreamWeaver. I hadn’t yet discovered the mystical world of stylesheets.

In the summer of 2006, it had only been a few days since France’s heart-wrenching loss in the final of FIFA football World Cup when I was absentmindedly browsing some WC pictures that I had painstakingly downloaded over my super-slow Internet connection. That delightful little folder of my favorite images was inside SUSE Linux. Whether it was version 9 or 10, I cannot remember.

As I was a KDE junkie, I naturally had the folder open in Konqueror, KDE’s default web and file browser. While scrolling through the list and mindlessly clicking this button and that menu, I stumbled across an option to generate a gallery out of images. I curiously clicked this option and, *boom*, there it was — a gallery of all photos in the folder in the form of a web page. What a beautiful web page it was. The page had supporting files, full-sized images, thumbnails, and an intriguing file with .css extension.

Clicking the CSS file opened it in my text editor. “Interesting, a .css file is only a text file,” I said to myself. Most of the contents in that file didn’t make sense to me, but there were these other pieces that seemed quite obvious such as background-color, color and font-family properties. In my reverse engineering fashion, I made a few changes here and there and refreshed the web page in browser. *Boom*, some of my changes were actually reflected. This seemingly innocuous incident created a minor explosion of curiosity in my mind.

Out came a new tab in Firefox, hastily typed were the letters “google.com” in address bar, and with a thud was hammered the Enter button on keyboard. A big search text box appeared in the next few seconds. What did I type in it? CSS, of course silly. To where did the very first search result point? W3Schools, of course silly. And so began my journey of learning CSS from the most popular web development learning resource on planet. I regret it to this day. My regretful mistake didn’t end at CSS, it was augmented by my learning HTML, advanced HTML and even JavaScript from W3Schools.

Out came a new tab in Firefox, hastily typed were the letters “google.com” in address bar, and with a thud was hammered the Enter button on keyboard.

Fast-forwarding to present times, just a couple of days ago I was listening to episode #7 (Online Resources for JavaScript Developers) of JavaScript Jabber, a popular podcast series for the lovers of the beautiful language. It was in it where a couple of web experts echoed my feelings about W3Schools. Just to be clear, when I was learning from the “great” W3Schools, I didn’t have any such feelings. In fact, I deemed every word and example on the website a work of experts, which they probably were. However, my feelings changed drastically when I “grew up” and started to discover most of my coding style that was derived from W3Schools was composed of a collection of anti-patterns.

In order to appeal to a wider section of audience and to make things simple, examples listed on W3Schools tutorials dumbed down so much that best practices were sacrificed. Take for instance their use of event handler attributes, such as onclick and onfocus, all the while blatantly ignoring the principle of separation of concerns. This was not even mentioned as a cautionary note to the initiated. Tricks and lies such as this put me back in my career by at least a couple of years.

<button onclick="var hello='world'; alert(hello);">Click me</button>

For years W3Schools piggybacked on the “W3” name to maintain its popularity. Meanwhile, other respected developer resources such as Mozilla Developer Network (MDN) took a diametrically opposite approach of going into deep discussions about each aspect of building blocks of the web. That looked scary initially, but with time your eyes and mind adjusted. I recently finished Part I and II of an exhaustive JavaScript resource called JavaScript.info. It also takes a profound approach similar to MDN’s. In fact, it encourages one to read W3C’s original specifications on various matters. Yes, it’s time consuming but hugely rewarding when applying your learning into practice.

I would like to conclude this rather loooong blog post by saying this:

Do not follow W3Schools or any such simplified online resource without questions. Be extra careful, use common sense, and do compare your learning from other (more detailed) sources. Do not let the details scare you away. Embrace detaily things. But don’t follow even the detaily things blindly.

The joy of creating in Flutter

Posted on 1 Comment

I am now officially in love with Flutter. What started as a crush has turned into something palpable. For the past 2 weeks, I have been heavily invested in learning Flutter from App Brewery’s bootcamp-style course. If there’s one takeaway from the course, it is this: Flutter+Dart is a lethal combination. I have now come to truly appreciate the ‘promised’ language for frontend and the frontend itself.

I must confess, though. I did not hold the same feelings for Flutter in the beginning. At a couple of meetups, I have called Flutter all sorts of blasphemous things — difficult to learn, highly inconsistent, and a confused approach — all without closely working with it. I, however, assure you that Flutter is none of the above. On the contrary:

  • its composition-over-inheritance approach makes it easy for beginners,
  • its Widget-oriented design makes it consistent, and
  • Dart’s succinct and familiar (JavaScript-like) syntax makes things less confusing

The App Brewery course I mentioned before has been an eye-opener. The course itself is pretty long and exhaustive, but rewarding. Since it’s geared toward absolute beginner programmers, I was able to go through it at 1.5x playback speed and even skipped a few sections. I am currently at 64%, hoping to complete it by the next weekend.

During this time, I customized my VS Code quite a bit to my liking (this post’s featured image), so much so that creating Flutter apps in Code is a far more pleasant experience as compared to officially recommended Android Studio. This, of course, is made possible by the awesome Flutter team who does not want to tie developers to Google’s ecosystem.

If you are curious about the source code of the app seen in this post’s featured image, here’s the GitHub link. It’s an app called BMI Calculator that I created as part of the course. Go ahead and explore my commit history to see how easy Flutter makes creating beautiful-looking mobile apps.