Declarative programming - Fun Fun Function

💖 Support the show by becoming a Patreon

Today, we’re going to explore the power of declarative programming, which React has managed to popularize, and it’s incredibly useful and important for almost all programmers. Don’t worry if you’re not a web developer, this episode is not web specific, and there is not going to be much code in this episode, and I’m not going to assume that you know what React is.

🔗 mpj on Twitter

💛 Follow on Twitch and support by becoming a Subscriber
We record the show live Mondays 7 AM PT

💛 Fun Fun Forum

💛 mpj on Twitter

💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:

💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:

💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly YouTube shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.

🤦‍♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.

Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.

📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.

⏯ On Fridays, an edited version of the show is adapted for and published on YouTube.

Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Team Collaboration, Software Development, Project Management

[DylanMatthewTurner]

I'm an electrical engineering student, and recently I've wanted to bring back analog computing. I've been thinking quite a long time about it, but I realized I (and those who came before me) had failed analog because we tried to make it work like digital. There were a few times it worked-ish, but digital quickly overtook it. I think using signal processing, AC, and a physical declarative-paradigm based processor, I think we can make analog computing work

[gonzalowaszczuk]

Declarative vs imperative basically boils down to operational semantics vs denotational semantics. It's pretty cool to learn about, since you also learn about how interpreters and compilers work, and ultimately how programs work.

It boils down to this: Your code uses a certain domain, which is the one you program with and think about in your head. In the browser, that model would be the view, the buttons, text, forms, etc shown to the user, etc. However, your code doesn't run magically with buttons and forms, it runs on a lower abstraction or machine. In the browser, that abstraction is indeed the DOM, but also the rendering engine, the ECMASCript engine, etc.

Imperative programming, just like operational semantics, make use of these machines and operate on them directly. You operate with the DOM directly, or use imperative javascript directly for your browser to execute, etc. If you were writing lower-level stuff, you'd access memory addresses directly, move pointers around the memory, maybe even access specific CPU registers, etc.
With declarative programming, your program is just an expression that you then translate towards your model, which is abstract and more mathematical in nature. With the browser, you'd define a language that you then translate into buttons, forms, sections of screen visible at times and at others not, etc. React.js would fall under this.

Declarative programming has the benefit of directly working with your domain or model, thus making programming with it easier, since you just program within the domain ("I want a button here, some inputs over there, a textarea over here, etc"). But it can't be executed or computed anywhere without an underlying engine or machine (it's just symbols and paper before that). At that point you do need to translate it into the underlying machine (e.g render it onto the DOM), and that's where the problems arise, like you've stated (DOM manipulation being slow, etc)

[damuz_yt]

"I'm not going to asume you know anything about react"

5 seconds later straight asks what are your thoughts on react haha :p

[josephhicklin]

Been using React, Redux and RxJS for about 6 months.

Things I love:
Composability allowing for more readable "endpoint functions", and immutability making the debugging process more precise with less of me guessing random interactions that I think might be happening.

Things I less than love:
Having to layer everything I do, forcing me to bounce around to multiple places just to build one thing. It's wonderful to write those "endpoint functions" that are super simple and pretty, but the footwork can be a pain.

Overall, I prefer to use React and I really enjoy the assuredness I get from finishing a component that has been completely hooked up through Redux and RxJS.

[DylanCurzon]

the music at the end was so subtle at first i checked my phone to see if it was ringing with this strange new ringtone

[rebornreaper]

Interesting to hear discussion on declarative programming in the frame of React. In learning about it from a Java standpoint, I've always heard it as "declarative tells *what* you want to do, and imperative tells *how* to do it." Which then leads you toward functional programming (and often Streams in Java).

Great vid as always. :)

[webkoros]

Another example of declarative programming is SQL. This language doesn't get the credit it deserves. It's a standardized, declarative language. If all languages were like this, our life would be much easier.

[MaffBridges]

I was writing some VueJS for a project at work yesterday, after spending months working with AngularJS. I came in thinking i'd just be able to smush something together the same way I do in angular, however now I see this video, I understand that I've been using a declarative framework. Now I know what I need to read up on, thanks! :)

[madimakes]

3:21 I actually don’t fully understand the details just yet but I assume that state change doesn’t happen *only* because the view changed it, but because *_something_* changed the state in father store? (ie the “only• refers to your example, only, right?)

[dimitri]

Just do a REACT series already. I really liked your functional programming series and I would absolutely love some react episodes from you. I'm gonna start a new fresh big project in REACT as a Lead dev and i know that this will be very helpful.

[igordlinni]

I'm learning React for a couple of weeks only. It was really confusing at the beginning, and even now I'm still trying to find correct way to connect React client app with server through socket.io, but it's, as I may see, having a huge advantages, and I had a lot of fun working with it already. Like it!

[desmondmc]

Great video MPJ. For what it's worth, i'm an iOS developer and I still find these videos really relevant and helpful. So thanks for keeping the content general enough to apply to other types of frontend devs.

[dmh]

Going from Angular to React was a revelation. The thing I liked most was that it was very clear how to structure the application.

[beng-fv]

One of the best explanations of react and declarative programming i've seen, thank you

[itsMapleLeaf]

I used to like react a lot, and I still do. It's a fantastic library. Nowadays i'm more of a Vue.js fan. A lot less mental overhead to get the same thing done while still being scalable. I like to think of it as what angular should have been.

[omarchehab]

Oh myy... Thank you for this episode! For so long I have had the appreciation of declarative programming because it allows for less bugs. I just didn't know it had a name!

[alexfoobar]

I've started with React two weeks ago and I like it. I'm just learning it cause I don't have much time for it so i'm going very slowly. Now I'm just discovering different ways to style the components having a css file for each component.

To start working with it I was looking first how to use webpack and babel to know a bit more how to have React working without the use of create-react-app

PS: I like your watch :D

[jahilkhalfe]

I was skeptical at first, but as time went by I started to Digg it and as more time goes by find myself digging it even more. React is Great. I would also say by using react you will improve your JavaScript skills in general. In general I find people who hate on React did not really take the time to get to know it better.

[rja]

I have built quite a few projects using React, Redux, Reselect and Immutable JS. I love it, it provides a superb structure to your app.

[vincentchollet]

Great video as always, full of energy, it has almost replaced my morning coffee of mondays :-)

I came from Angular(1&2) and discovered React since 4 monthes, and the advantage of React over all MVC framework for me was : REACT IS JS-CENTRIC

What does it mean?
No more "loops" in HTML with mutant tags like <ng-for> and all its friends.
In ReactJS, the view is written in standard HTML, and the control is done in javascript. so Simple and no "specific" tags to learn.