Things to learn before creating a beginner CRUD app


#1

I’m just trying to get my head around the ReasonML ecosystem, coming from EmberJS.

So if I have to become reasonable competent in this ecosystem, do I have to learn:

  • ReasonML
  • ReasonReact
  • React Router
  • BuckleScript
  • The React way of building webapps

This seems a lot before I can get productive and sure enough of myself to push a decent-sized LoB app in production.

Also, is there any source where I can find out how ReasonReact differs from ReactJS?

What does the community think about this?


#2

Hi there,

If you want to introduce LoB app in your company, then you will definitely need to get familiar with: ReasonML, ReasonReact, React Router (if you need it, but it is suuuuper tiny), BuckleScript (to read source code of libraries or other apps, I usually take examples of usages from such things).

ReasonReact has no differences with ReactJS, as it is just the bindings from ReasonML to ReactJS libraries. ReasonReact brings some nice improvements, like state, actions (you would need them in React App too).

There are a lot of guides:

https://reasonml.github.io/docs/en/overview.html << Entry point for first ReasonML experience
https://jaredforsyth.com/posts/a-reason-react-tutorial/
https://medium.com/@DmytroGladkyi/create-react-app-with-reasonml-aa9c03849c3b :hugs:
https://medium.com/@DmytroGladkyi/adding-reasonreact-router-to-reason-react-application-408c941a2890 :relaxed:

Basically, right now there are only starting guides available :smiley: :smiley:


#3

Hi @hrishikeshchoudhari,

You pretty much have a good grasp on the scope. Everyone learns differently but since you are coming from Ember with a good amount of JS experience already, I’d recommend going through the excellent official ReactJS guides and tutorial first to understand “the React way” and be able to reason about the large amount of React code you can find in the wild.

After that, I’d go through the ReasonML guides and Dr. Axel’s book at http://reasonmlhub.com/exploring-reasonml/toc.html which gives you a very good basis in the language/syntax itself. Use the “try” playground on https://reasonml.github.io/en/try.html as you are experimenting with the constructs of the language to see how Bucklescript compiles your code to JS. I wouldn’t get discouraged about some of the more advanced topics you’ll find in the book… you won’t have to master poly variants or functors to ship LOB apps… you can come back to those later.

Next, I’d go for the official ReasonReact guides… which are written assuming you have familiarity with ReactJS already. This is where you will see how it differs from ReactJS. The router is discussed in those guides. Then I would go through the BuckleScript docs. You don’t have to memorize everything in there if you are not going to write bindings to external JS libraries immediately but you will want to know where all of these docs are to refer when reading code and looking up standard library functions.

With that foundation I would start reading the blog posts/articles that @gladimdim mentioned and study real ReasonReact projects you can find (search Github for “reason-react filename:bsconfig.json” sort by recently indexed) and packages you can find on Redex https://redex.github.io. Once I have a decent grasp of the fundamentals and “where to look” for docs from the above resources I find I learn best by cloning and studying the code of working projects and writing small POCs for my project.

I think you will find it’s well worth the learning effort for the major benefits in productivity and maintainability the inferred type system, compiler, and pragmatic functional/immutable (mostly) approach gives you.

If you need any help while learning, please feel free to ask on this forum or on the Discord chat!


#4

tl;dr: Yes, you have to learn them.

I kind of hate to tell you this, but yes, you do need to learn the basics of the language that you’re going to write in, and the framework you’re going to use. You’re going to want to go through all of the pages on the nice pages they have set up. You’ll likely find a lot of value in going through Jared Forsyth’s tutorial. Do a couple of extra tutorials as well. In particular, learn how Reason paradigms map to JS paradigms because that will be your best connection between what you’re learning and what you already know. Like “how do records work compared to JS objects?” or “What do I do if I want to build up an array of objects by looping over an array, returning an array?”.

Getting a high level view around how react components work will be important React.

One thing that hurts a bit with Reason are the docs. You’ll have to look at a bunch of source code, so being able to read functional programming paradigms is going to be a must have.


#5

Thanks a lot for your replies. It has definitely bolstered my confidence in the Reason community.

It looks like I’ll have to undergo the same learning process that I did with Ember in late 2012. It was a huge learning curve, given that the framework and its CLI tools were in flux. The benefits I reaped from Ember have been great! I let Angular / React / Vue / etc slide by completely.

I had hoped for a learning experience like Elm, where all the required tools and architecture are put together in one place, and are vetted by the authors.

I’ll start digging in Reason. Hopefully the promises pay off similarly.


#6

Definitely agree with @malisbad that once you get through the docs, guides, and tutorials you’ll have to learn by reading a bunch of source code.

It’s great you already have Elm experience… that will help A LOT when reading ReasonML code as they are similar language cousins. You’ll find similar patterns for Variants (i.e. Union types), switch (case), the familiar reducer pattern: https://reasonml.github.io/reason-react/docs/en/state-actions-reducer.html, type inference, helpful error messages, etc. If you really like Elm instead of using ReasonReact you can check out https://github.com/OvermindDL1/bucklescript-tea.

I evaluated Elm also but prefer the pragmatic JS interop/bindings in Reason/Bucklescript versus the ports and subscriptions.

Good luck!


#7

I think we, as a community, need to treat this as a worthwhile challenge. Of course it’s true that you need to learn “the basics” of any language, but some language ecosystems have reduced the subset of necessary things to a compact starting point that progresses naturally. Some emulation-worthy examples of this: python, ruby, and Elm. I agree with OP that there is currently quite a large step before a new developer can create a basic useable app.

(I think adding new devs to an existing ReasonML project may be easier at the moment–but I’m leaning on Cheng Lou’s description of interns at Facebook for this observation).


#8

Where did he talk about the interns at Facebook? I’d like to see what he had to say on the topic.


#9

When coming from say Ruby or Javascript, the programmer would already know what objects and metaclasses are, how they can implement inheritance and overload behaviour, what prototypes are, how this works etc. They’re steeped in this minutiae and have learnt advanced concepts through a natural progression of learning. This implicitness (a lack of knowing that they know) makes those topics seem “normal” or “natural”. Sussman calls this “programming by poking”.

ReasonML and ReasonReact has already done a great job of making that kind of exploratory learning of functional programming possible for programmers from imperative background (I should know, I am one of them). But if programmers do not understand and acknowledge that despite the surface syntactical similarity, this is a different way of programming and involves some deliberate effort and practice to get good at, then that’ll set up wrong expectations and they’ll give up when hitting places where their existing mental models can’t carry them forward easily. That’ll lose us good programmers and create bad publicity.

I found Jane Street’s OCaml workshop (https://github.com/janestreet/learn-ocaml-workshop) to hit a good balance here in teaching language fundamentals. We recently ran a workshop for Reason based on that, and created a Reason clone of the workshop at https://github.com/protoship/learn-reasonml-workshop. We had the choice of introducing the participants to ReasonReact right away but chose to go the slow, boring route of language fundamentals so that armed with the basics they can learn-by-poking by themselves later. And to this extent I also recommend Real World OCaml for anyone trying to learn Reason even if they intend it for building front-end apps alone.


#10

There is a new egghead course on ReasonML from @nikgraf. If you like learning from videos, this may be helpful!