Falling Back in Love with the Front End: An Interview with Azat Mardan

Follow us on LinkedIn for our latest data and tips!


Falling Back in Love with the Front End: An Interview with Azat Mardan

Azat Mardan teaches multiple JavaScript courses for DevelopIntelligence and appendTo. When he’s not teaching, he is a Technology Fellow at Capital One and a prolific technical writer. He has 12 Javascript books published, including React Quickly and Full Stack JavaScript.

We interviewed him about his experience with React.

appendTo: Hi Azat, tell us about your experience with React. When did you get started and what got you into it?

Azat: The first time I’d heard about React was three or four years ago. I was teaching at a coding bootcamp and we would usually find out about new stuff before it hit the mainstream.

I didn’t jump into it right off the get go. I was just observing it and seeing what would happen with it. Then, around two years ago, it became clear that React was becoming extremely popular. I would go to conferences and all people talked about was React and ES6. So I decided it was time to write a new book. I approached Manning Publications and offered to author a book and they agreed and I started writing React Quickly.

React is now totally mainstream and we have a whole ecosystem of libraries and components around React. React has grown well beyond just building web apps and has generally changed the way people develop, on the web and off the web.

appendTo: What did you enjoy about writing a book on React?

Azat:  I learned React, inside and out, while writing this book. One of the things I’m most excited about is that React is helping to bring back functional programming.

There used to be a feud between object-oriented programming and functional programming back in the day. Object-oriented programming won this feud and OOP dominated the landscape for a long time. But now, functional programming is making a comeback.

I find functional programming just keeps things simpler and more manageable and has very little overhead. It lets me just get to solving my problem instead of creating and co-creating, classes and interfaces, extending those interfaces inside the class, et cetera, et cetera.

It’s amazing to see such a resurgence of interesting in functional programming. There’s so many new books on functional programming, articles on functional programming, and online courses. It’s great for engineers and developers to be learning more about functional programming. Hopefully the new languages like Elm and some other pure functional languages will continue to bleed into the React world and related libraries.

appendTo: What are your general thoughts on React?

Azat: If someone is not using React, they should definitely give it a try. React got me back into front-end development, period.

A few years ago, I was ready to quit frontend development altogether. I didn’t want to learn Angular. I avoided Angular on purpose, it just looked weird to me. It forced you to learn so much Angular-specific domain knowledge and so much knowledge on how the directives work. I just didn’t want to become an Angular developer. I wanted to remain a JavaScript and Node developer and avoid learning some very specific narrow framework.

But when I discovered React, it totally reignited my passion for the frontend. React was fun! I built a relatively large project called MongoUI, it’s a visual dashboard for MongoDB, where you can create documents, update documents, search for documents. So instead of using a console, you can just use a graphical interface. I used React for this and it was relatively easy. I would create a small component, reuse it in many other places and it was magical. Front-end development with React is so much simpler and easier now.

appendTo: Well that sort of answers my next question. Why has React grown so big, so quickly?

Azat:  Well, it wasn’t that quickly really; it was a few years. But React was a paradigm shift. It shifted the fundamentals. Once people started using it, they didn’t want to go back to MVC or templates. You don’t want to jump between HTML and JavaScript anymore. You want all the code for one piece of UI to be in one place. In React components, you describe your UI just once and then whatever dynamic code you need to put, you put it right there in the component. It is self-contained functionality and React takes care of maintaining internal state and syncing the state with the UI. React took off, in short, because of simplicity, ease of development, and developer experience.

In a way, the evolution seems to go in a circles. We started with simple Vanilla JavaScript for apps. Then we have jQuery. Writing lots of jQuery ends up with spaghetti code. Then we decided we needed some MVC Frameworks, because MVC was considered good in other languages. MVC frameworks started small like Backbone and then they become complex like Ember and Angular. Now we’re back to the just the simple.

React gave us components, the virtual DOM, diffing the virtual DOM from the real DOM and not manipulating it directly. React didn’t invent components but it did make them more popular. Add to this all that, with React, you don’t need to learn a new framework (like in Angular), you can just use JavaScript.

With React, it’s fairly easy to get started by reading a few blog posts and starting small. It’s also fairly easy to integrate React with legacy code or existing jQuery code.

appendTo: We wanted to learn a bit more about the React inspired libraries like Inferno and Preact. Where do they fit in?

Azat: Another great thing about React is that the enormous community keeps forging ahead. There are people still working on and improving React Core and React Router. But now there are these new libraries, like Inferno and Preact, which can replace React Core. These new libraries are pared-down, lighter-weight, and ultimately, faster substitutes for React core. They allow you to keep all your existing React components, method names, and class names, but get a faster end product. So, for example, if you’re not going to use a specific part of React like property types, you can use Preact/Inferno.

appendTo:  What are some of the benefits of having a lightweight React?

Azat:  By having your app load faster, it lets more people around the world use and enjoy it. Many of them might still be using 3G networks. A lot of sites have gotten really heavy and libraries like Preact/Inferno allow you to reach a broader audience. Visitors can notice delays of 100 milliseconds and the longer you make people wait, the more traffic you lose. Less traffic means less customers and that translates to money for businesses.

appendTo:  How hard is it to switch our React core for Preact or Inferno?

Azat:  In some cases, it could be just one line of code. Instead of importing React, you would import Preact. It would be one line of code or a couple lines of code, in many cases. Your other React components code stays the same, you just use the different library for the core.