Declarative programming - Fun Fun Function
HTML-код
- Опубликовано: 6 янв 2025
- 💖 Support the show by becoming a Patreon
/ funfunfunction
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
/ mpjme
💛 Follow on Twitch and support by becoming a Subscriber
We record the show live Mondays 7 AM PT
/ funfunfunction
💛 Fun Fun Forum
Private discussion forum with other viewers in between shows. www.funfunforu.... Available to patron members, become one at / funfunfunction
💛 mpj on Twitter
/ mpjme
💛 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:
circleci.funfu...
💛 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:
quokka.funfunfu...
💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly RUclips 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 RUclips.
Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Team Collaboration, Software Development, Project Management
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
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)
+Gonzalo Waszczuk great write up!!!
idk what ur talking about but it sound smart
@@fadhilh3931 You want to program thinking about abstract concepts, but the program runs on a specific machine with bits and instructions and stuff. Declarative programming allows you to only focus on the abstract concepts without worrying about how it's executed (but you get the downside that you don't control how it's executed, there may be performance issues or bugs you can't really control). Imperative/operational programming allows you to focus on how the program executes on that machine (with the downside that you can't really think about the abstract concepts anymore, you have to constantly map between those concepts and bytes, integers, arrays, etc, and this can introduce bugs, create unmaintainable programs, etc)
"I'm not going to asume you know anything about react"
5 seconds later straight asks what are your thoughts on react haha :p
:) haha yeah, it's tricky with multiple audiences.
I don't know shit about react but I still have feelings about it! I'm a man on the internet, this is what we do! ;P
Asking a reaction to React... pun intended? :p
(I have no feelings about React at all. Never played with it.)
I love you
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.
what's composability?
what's endpoint functions?
Composability is the difference between just writing a sentence, and writing a sentence while having to follow every word with the following info: (Is it a verb, noun or adjective? What's the country of origin? What parts of speech can it be used in? etc...)
In coding composing code is essentially using functions that perform all of these steps for you, allowing you to just write the "word" (function call) itself. It makes things much easier to see what's being done because instead of looking at potentially dozens of lines of complex code, you can just read:
thisThing.sendToDb(thatThing)
Which is way easier to read.
"Endpoint functions" are a term that I use (hence why they're in quotes because it's just something I say) to describe these function calls that are composed together. I call them endpoint functions because they are the thing you are reading, and others are reading to see what is happening at that point in your application.
I could call them "sentence functions" as well, but that doesn't sound as techy. :P
You might get a kick out of Cycle.js. It's not perfect (is anything new and shiny ever perfect?) but it does take unidirectional data flow to a whole new level. Input -> processing -> output... all the way.
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?)
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
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
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. :)
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!
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! :)
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!
I am just using RxJS / RxStore with angular2 / ionic 2 framework. I totally like that I am forced into a specific structur, but needed some time to get my head around it. Especially nesting reducers was kind of tricky. But as of today this project is my best tested project because it is so easy to write tests for reducers. In the angular2 framework you don't even have the rerendering issue. The only overhead is the immutable state that gets recreated every time. But it doesn't seem to bother my application yet witch is kind of large already.
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.
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.
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.
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
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.
One of the best explanations of react and declarative programming i've seen, thank you
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.
Going from Angular to React was a revelation. The thing I liked most was that it was very clear how to structure the application.
I really haven't played with react much, but I really like the approach of jsx and components. It makes coding react really fun, and easy to get into. I tried angular once, but I was thrown off immediately by the complex folder structure that the angular cli generates, and how I needed to put new lines in 5 different files if I wanted to add a new view. React is really simple in the beginning, and it allows you to do things your way if you want to. I love that. If I just want to build like a two-screen spa, I don't need to learn complex routing and Viewmanagement stuff, I can just put an if statement into my app component and display the correct view component. While this might be not best practice for large scale applications, it's super easy to do. I love that react is in essence a small system for rendering the Dom, that can be set up and used in minutes, but can also scale into huge, complex systems.
The main advantage is that it doesn't NEED to be that way.
Also people that say "react is harder to learn because you need to learn a new language, jsx" are stupid. Jsx is just syntactic sugar for a bunch of document.createElement's, and it's really just html-blocks that are handled as everything else in js, as objects. It's not more complex than a string literal "hello, world". It's just a way of directly describing how an object should look.
vue's and angular's way of needing seperate templates that you then fill with data in js is a lot more complex i feel
The first time I met declarative programming was a few years ago when I switched from developing WinForms to WPF. I wondered why it took them so long to go that path when the HTML already existed. You can see the HTML as the simplest declarative programming as well and compare it to building your whole page with JavaScript.
I'm just getting up to speed on React but so far I love it. Really makes managing state way easier, and it was super fast for me to learn, which is not something I could say about Angular 1.3. React seems like a really well scoped tool.
I don't think React ever diffs with the native DOM. I do believe it creates a new v-dom on update, diffs with the old one, and then patches the native DOM with the diffs.
Great video!
I have worked on medium sized CRM dashboard for my company, and used a React front-end with Firebase as the back-end/database. It actually worked very well for the first few months. But then slowly I noticed performance problems, mainly from the Firebase side rather than the React side. Also Firebase has a lot of missing features, like adding even the most basic back-end logic. Not to mention the extremely naive querying capabilities. But overall, it's actually a very good set of tools to start off with, and you can actually get a lot of mileage, before you're forced to introduce a small backend to keep up with feature requests.
But I completely agree with your thoughts about declarative programming being one of the most clear and straightforward way to code. It really does help you keep your code maintainable, and the unidirectional data flow ensures that there are very little surprises. There a a few corner cases where you have to break this rule of thumb, but it's maybe 3 places in your whole codebase. So if something goes wrong, you know exactly where to start troubleshooting.
This is great, thank you. I always feel better getting into a new library via it's fundamentals, why it was created in the first place, why it's different. Easy to get sucked into the detail and end up using it in the wrong way.
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.
Started with Angular 1.5 and then went to React. Hated it at first, and then after getting to grips with it I loved it.
Just getting started with React. The component structure is very nice. I think it makes my entire frontend code a lot cleaner and easier to maintain. Also gets rid of 'div soup' - which is awesome! I think React's isn't as popular as it could be because it makes libraries like jQuery and preprocessors a whole lot less useful, which means *gasp* writing your own code for things like animations, injecting css as needed, and having to actually think about the structure of your app instead of just hacking things together. Great video as usual :)
Finally! Someone knowledgeable that's extremely fun to watch and listen to! Keep up the great work!
short ago I started on elm which uses the same pattern that MPJ described here. unfortunately I did not yet understand how I should abstract subcomponents away from the rest of the app, since the messages specific for those subcomponents are defined as the global messages type and I don't see a way to separate them from the rest without breaking the compiler
Christian Hörauf you can use generic types istead of refering to concrete msg type
While on the subject of virtual DOMs, have you had any new experience with Elm? You talked about it a year ago and I'm wondering if your thoughts have changed.
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 HUUUUUGE 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 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.
Vincent Chollet Wish I could upvote this 1,000x
This is the description of React that I've been wanting to read for months. Angular 1 dev here.
className attribute is non-standard
debounce is also used to make sure a user doesn't misclick twice. It's not just optimization.
From what you describe, I use Imperative programming. I am trying to get into react, and I thought it would be really cool if you could do an episode on how to structure the state I'm React and getting that nice flow that you are talking about, because it seems like my brain tries to use imperative programming with react, which seems a bit confusing.
I think React is good for beginner/intermediate JS developers (like myself). It teaches you good starter principles and concepts. It brings alot of things together nicely: Component life cycles, the state and props flow, binding events to instances, redux state flow allowing for global and local component state, and simply declaring prop types. Through share scale, it's easier to debug due to availability of examples, tutorials, snippets and stack overflow answers. It also introduces functional programming, non mutating state, pure functions, side effects, normalise/denormalise, destructuring....canon fodder for pros but not noobs. Also happens to touch on alot of the concepts u cover.
I haven't really tried declarative programming yet so this whole comment could be completely wrong. I do see how mapping object behavior to state makes sense, and have used state based patterns. I however prefer the event based pattern (imperative?). In the example of a payment screen, I can setup dom object to listen for specific events and have then make changes accordingly. I find this easier to reason about. for example a progress bar, has a simple piece of code that basically says when a 'payment' event is triggered, display and animate. When a 'complete' event is triggered hide. When your looking at a specific object you can very easily tell how it will function and interact. This way A causes B, instead of A changes the state, which then causes B. I think it also makes it much easier to reason about object you didn't make (or forgot how they work). A basic HTML button has a click event, I listen to it and it passes needed info. If the HTML button changes a state, how would the state change, it would be different in every screen and you have to write code to deal with this.
However if your view has hundreds of events then useing a state system would make much more sense because that can get confusing (or you should't have hundreds of different types of event).
Nice episode, pal.
I've been using react for about 1 year and I really liek it to build, at least, cool responsive components when needed.
I was pretty naive at first and made the terrible mistake of trying to make EVERYTHING fit as a React Component, which made me think it was a pain to use it, but when my mind got the real intention of the library, it has really make me simpler to do a lot of things.
I'm practicing my english watching your videos without subtitles! When I can understand everything, I guess It's time to try to find a job abroad. It's very funny to practice with a subject I like!
On React: My brother swears by it, but I haven't had the chance to get in to it very var. Angular made my life easier but I've not seen much on how to connect React view to the state controller. My brother has shown me examples of code and has shown me a chrome plugin that allows you to view state history, rewind and even copy past states. That seems so damn powerful that I am still looking into it. If only I had the time.
On the vid: Really helpful in bridging gaps in my knowledge. I have a few more terms to search for when I learn React
What he has showed you is Redux. Wes Bos has excellent courses on that that I recommend.
Thank you for the video. This helped me understand React more clearly now.
I haven't done React, but I've done other declarative programming things, and I think its really intuitive and simple to reason about as you've said, but I think you really need a good base of how things work, otherwise I feel like it can be quite confusing.
But for someone that has a good base, I think is wonderful stuff, that can save you a lot of time and headaches.
After this i think I'm going to give React a try!
Have you had a look at VueJS? It shares a lot with React but doesnt have so many demands on code structure or modules unless you want to of coarse, you can simply import the runtime in a script tag and have a go using your existing html like you would jquery.
This approach doesn't scale at all, so why would you ever build a web app without a bundler?
I havent started yet with React, bu reading the comments I wonder if I should try Vue.js instead. Any thougts on that?
thefuecisla try react, get an idea and then use vue
I have briefly looked into React. I am into small applications, but
really like some of the concepts that React implements or supports, like
immutable data with Redux. I have adopted Vue.js 2 as my view library,
and have been really happy with it. Maybe one day I will learn React.
Great video. From what you describe, the design pattern of React seems to be the same pattern used in ASP.NET WebForms, i.e. declarative view (.aspx) and a code behind (.cs) which handles business logic and data access. However, people seemed to migrate away from that pattern in favor for MVC then MVVM, and now come full circle with React.
Not really. Business logic is usually relegated to something like redux. An optimal react app would ideally just render props passed to it to html elements.
So I've been doing React on and off for a couple of years and full time over the past 12 months. I went from really disliking the mixing of JSX and JS to enjoying the modular approach it brings. I love the whole declarative approach "my state looks like this, therefore the browser DOM will look like this", however one growing pain I'm finding at the moment is the levels of abstraction and how data is transformed between state to view (this is mostly a redux/flux teething problem)
e.g.
- Redux Action: Requests some data that has a 'date' property
- API: Returns a date object
- Redux Reducer: Sets the raw date object in Redux State
- Redux State: Holds the data and the date in raw format
- Higher Order Component: Needs to render four child components
- Child React component: Needs to render the date as '10/03/2017'
- Second Child Component: Needs to render the date as '10th March Twenty Seventeen'
- Third Child Component: Needs to render 'three days ago'
- Fourth Child Component: Needs to render a red '-' to indicate the date was in the past.
Those last five bullet points have confused me as to how and where each piece should be done (should they be done inside the component or should components be dumb and render only what's given as props?). I like how non-prescriptive React is but at the same time, I find it all too easy to end up writing complexity at the wrong layer of this declarative flow.
ps. your videos over the past couple of months have been far too coincidental with my current conundrums! so thanks very much!
React was an interesting learning experience. I wouldn't say it was very enjoyable to learn to start, but once I got the hang of it I found that my first thought when starting a project was whether using React would be practical or not.
Can we use Declarative programming on the server side ? if yes - how ? and for what tasks ?
Declarative programming is not the mapping of state to view. It's more general than that. It's basically the declaration of the final state, irregardless of current state. The 'system' should figure out to mutate current state to final state automatically. This differs from imperative programming where you state the steps from to get from state A to state B. But if your starting state is not state A (due to a bug or change in a feature etc.) your imperative code is now buggy as you will not necessarily get from your new starting state to state B.
Been using React for a long time now. Still have no idea if i'm using it "correctly" plus my Redux store functions get massive handling all the data flying by. React is a big free for all.
Been playing with Vue recently and am loving the fact that the experience is a little more "guided".
I did have same initial feeling about React 2y ago, but now I love it
in React it feels wrong to put your HTML within JavaScript I like some of the mind sets and conventions but I can't seem to get past the mix of concerns.
Been used Elm for some weeks and I loved the functional way of to do the things work. I've also enjoyed the ore-direct flow. And also, the reusability and the readability are great! React is pretty similar to Elm, If I'm not wrong, React was based on Elm way :)
Great video.
I have no idea how react works, but I'm planning to get into it sometimes in the next future! In the company I'm interning at it is used for all the front-end stuff and I'd like to know a little bit just to be able to discuss stuff with the front-end guys :)
I did a codeschool course on React and I have no idea what I did. The course was very abstract, (which in of itself isn't a problem) but I had difficulty understanding what exactly was going on. React seems like something that has a steep learning curve. It seems like you have to stick with it before that "Aha!" moment occurs (which also isn't a problem).
I read that declarative programming is about 'what to do', while imperative programming is about 'how to to'; and SQL is a great example of declarative programming.
btw, Ember also uses a virtual Dom (totally stolen from React) but also only re-renders specific aspects of the DOM that have changed (a nice precision improvement). There is a heavy _convention_ towards declarative (data down, actions up) but it is not really enforced by the framework.
Whats the difference in regards to data flow between react and angular? The state store for react seems a lot like scope for angularjs. I am a complete noob at angular and this is the first time I am learning about React other than that time I learned React is a javascript framework. 0.0
Thoughts on Aurelia? I saw Rob Eisenberg's talk from 2016 and was very impressed.
Same as you on React. The conceptual extensions to it are more interesting to me, especially combining it with Rx.js
I also enjoy when I can write declarative code. But I have to totally trust the tool/language in this case: if there is a risk that my implementation won't be valid due to performance issues or bugs, which I can't overcome as easily as I do with imperative approach I simply won't use it. Also there is extra risk for you as an employee when you choose an uncommon tool. If you make a slow product in Java you may get away blaming Java for being slow, people are used to it. If you choose a declarative language or a fancy tool to save your effort and write a slow product - your manager will blame you for not choosing an old-good-imperative-way-everybody-expected-from-you-to-choose-and-other-guys-can-help-you-with and your career of somewhat mediocre-but-stable-developer will be broken :)
Hated React when I started 6 months ago, especially Redux... But, I found myself liking it more and more and learn a lot of core javascript and functional methods along the way. I came from Angular 1 so React got me really confused and verbose at first, now I can appreciate the fact that having to know what each part of the code and there's no magic behind what the code is doing. VueJS, I haven't played with, but from looking at the docs, the tags seems similar to Angular's directives and with components like React. Should give it a try soon.
I've been using React, Redux and Meteor for the last six months, I really like React, it took me a while to get it!
React has changed the way I code UI, is simply beautiful.
@funfunfunction, what do you think of preact.js?
Declarative programming is like writing generalized formulas, not manipulating concrete numbers
Great video and an interesting subject. Sad, that you told about declarative programming mostly in context of React.
The biggest stumbling block for me with React was handling animations in UI. It is quite natural to describe animation states in a declarative way (all computer games are built this way), but, speaking of DOM and React it is quite hard to implement complex transitions and timeline-like animations. Animated API in ReactNative is quite powerful, but nothing similar exists in the browser world for now.
Am an Engineer in autos, last project was Android( via Java)... I had to monitor the "state" of a controller and depending on which have 1 of 25 views to show on the display.
I have never done declarative programming before but this sounds like the kind of situation that would shine.
I wrote a state machine in Java to listen for changes. if changed, basically looks in a function that maps all of the 25 states to a view with a giant switch statement...I need to see an example of what you mean. this sounds valuable
My state of mind about react is in flux. I think an immutable opinion causes people to dispatch actions that they might regret in certain situations.
@mpjme Coming from the AngularJS world, I have yet to do much with React, even though in theory you can use Angular and React together. I, for one, am very interested in React, but i haven't gotten the chance to really sit down with it yet.
I'm very interested in this topic, but without some hands on example it gets very abstract and fuzzy. Would love to see some concrete examples of declarative programming. As always thanks for doing great videos and topics!
Can you do a talk about functional reactive programming patterns like you hinted at and sortof mentioned here? i.e. maybe comparing "elm architecture", cycle.js, sodium, ...?
Hi MPJ, what do you think about Haxe?
When I saw React for the 1st time I thought:
"I'm doing Angular for such a long time... I don't have time to learn all the things that come together with this new framework (redux, transpilation, etc etc etc)".
Now I'm learning all of the "React + new things" and since some time passed there are lots of good content. The framework matured and I don't regret waiting to learn.
Only thing missing is doing a serious (production ready) project in React to feel the pains.
Great video, any thoughts on inferno.js? I would love to see a video on Rx btw!!
I've worked with react, and I heavily agree what you mentioned in the video. The big selling point for me is React's simplicity. Components with props and/or state.
I kind of had the same thoughts as you in the beginning. Loved angular before, hated react but slowly started liking it. However what I am still missing from angular is some out of the box stuff which in react you have to do manually. e.g ng repeat was convoluted but was really simple. if you knew how to use it properly with track by $index it wouldn't slow down your project.
in any case, overall for me the prons of react are: clear structure, easily manipulated components, modular, states and props are really handy, things like redux makes big project easily scalable.
cons: horrible when it comes to animation / transitions due to fake dom, no out of the box components like angular, bad for small projects
Any thoughts on Elm?
I was hoping someone would mention this. I haven't messed with React much, but II fell in love with this whole one-way data flow pattern while working with Elm.
i've recently started with react. State drives me insane sometimes. I've started to plan ahead much more, since it's much harder to map state after everything has been layed out
I fell in love with React at first sight :)
Application context, single data binding, composition, Redux... What's not to like :)
I have been recently trying vue and vuex and they seem following the same idea behind.
Does WPF xaml count?
I used React for awhile. As a view, it is great, but it does lack some stuff with state management. For some reason, I'm not a fan of Redux. It feels as if Redux is trying to force the use of global variables all the time. For global state, yes, it is very useful. But most of the time, React's built in state management is good enough. Maybe I just have not worked on a project serious enough for state management to be a big issue.
Have you looked at MobX? Less restrictive that Redux. Quite suitable as a global state or view model for React, but allow more ways to shoot yourself on the foot. In general, I find the flow of View->Service->Store->View a bit "uncontained". I prefer something like View->Store->Service->Store->View. I'm no expert though, so I'm probably wrong. What do you think?
Having started my front end experiences with Angular 2 before moving backwards to do some Angular1 (AngularJS or whatever it's called now), I'm really appreciating React's light weight API. Compared with 100s of Angular directives, I'm guessing all of React is about 30 methods. Of course, it's a totally unfair comparison, but it sure makes getting started learning it much easier.
After learning core JavaScript what should I learn? I'm getting my feet wet with basics of DOM, node js. Any suggestions? Also how good do I have to be at html/css?
jQuery is invaluable imho. It's basically a whole lot of shortcuts that make coding much easier.
I'd say that you need to know html and css in order to get the view to behave the way you want to, but you don't have to be a master of design or anything. It's a useful skill to be artsie, but it's one I lack
greysontyrud thanks, iv heard a few people saying that jquery isn't as necessary anymore because of improvements in the language or browser compatibility. But I think I should check my assumptions and familiarize myself with it before I dismiss it completely.
I guess the framework I should learn/use depends on what project im working on but I currently don't have any projects. I don't know what to learn or why to learn them. This video helped clear some things up. I hear node, angular, react, redux thrown around a lot. I guess I just have to get comfy reading and trying out frameworks to get a better feel for them and then decide if I want to spend more time learning it
Tazza DK yup. I'd agree. I hear that about jquery too, but it's so often used in code forums it help to understand it. As ever; not having a project is a real stopper for most people. I've made up projects just for something to do, mostly around gaming info sites. If you really have no idea then try code academy. They have mini projects as you move along the lessons (and it's free). It might inspire you to come up with a simple project of your own
learning react + redux now. Lots of things to juggle and I have not managed to understand how it all works together yet.
What's with the low sound quality?
Hey, let me first say that your channel is great and that I love watching your videos on Mondays.
I don't think Rx is a good example as an optimization library. I get what you mean, debounce can be used for optimizations but it can also be used to implementing things that solely regard user experience and make it easier for you to implement such things than you would without Rx.
E.G I can use debounce to pop up an animated gesture every time a user clicks on his keyboard and a certain timespan has passed. If I don't use debounce the gesture will popup too often and the user will have a bad experience. In this case debounce makes it extremely easy to implement this feature. It might also help performance but in this case it is more about user experience.
MPJ, have you ever thought about doing some proper tutorial videos on JS? I would love to see your take on teaching JS.
Overall Declarative Programming is a total change of mindset, when you are used to Imperative Programming, in my experience with React Native, the learning curve is small and helped me understand much better Imperative Programming and also improve functional Programming. Two birds with one stone.
I see everyone saying Vue, but have you tried RiotJS.com, MPJ? Much simpler than React, uses combined HTML + JS tags for making components, and can use Pug/Jade or TypeScript in tags easily
+Neil HippieKiller I'm not a big fan of vue nor riot. I strongly disagree that introducing an entire new language interweaved with HTML is simpler than JSX, which is a very thin and simple layer. With React I can just use JavaScript map/reduce etc instead of magic "each" expressions and stuff like that.
You think you could please do a video about Webassembly?
Rethinkdb + Horizon + React, had this vision of a declarative stack. Would be interesting to talk about how GraphQL & relay take it to the next level.
why not talk about mobx and redux. I've been using Mobx for a months, seems it can get job done pretty well. Have you guys found any issue about Mobx
What I think about React:
I absolutely love it .. I love how JavaScript-centered it is, I love the ability to compose things, and I absolutely love debugging React...
What I really don't like is all the configuration and setup you need to do
Have you ever used angular? React is just "create-react-app " and you're done. Just add stuff to your main js file. Nothing to set up.... Or am I missing something?
I feel the same way. I used to hate React, but as I use it more and more I'm beginning to like it.
I absolutely love react. Especially with react native, it is so much easier to build UI's with react than it is with UIKit on iOS.
What about SQL? I thought you would talk about it... I really like React since it was release a couple of years ago, the only disadvantage I can see it is the configuration for webpack and related tools ...
haha you love react and it shows dude. the good part is i am going to give react a new chance! keep it up, always waiting a new episode!
Good watch, nice discussion.. :)
Does XAML (design code for Windows Apps) count as Declarative Programming?
On that explanation, I assume it is.
And, we use MVVM pattern (a.k.a. MVC pattern), to make data binding between the view and properties/fields in the ViewModel class -- so it's like a place to store all states for different elements in the view.
To be honest, I am not sure how rendering works, but I assume (and hope) it helps to let Windows re-render only elements bound to the changed state, and not the whole view.
Anyway, what I wanted to say is that, in the way I use it, I still use events to get notified about changes, but in a declarative way, that I care and code less about it.
Thanks for the video. :)