[Help] Path to transition to Web Development

General discussion
1

Hey Alan !

I´d really like to have some hints on how to transition more into web development ground.
I work mainly with python, grasshopper, plotly, dash, bootstrap etc. Currently I´m learning JavaScript and the goal is to implement automated workflows using rhino. compute and visualize 3d in the web with Three.js and even IFC.js.
I find kind of confusing the learning path for JS. There are so many moving parts to engineer ( React, Vue, Node, Fiber, etc…) that sometimes I loose my goal of what was exactly what I wanted to do.

What would you recommend to make this learning path more effective?

Best.

Tomás

3 Likes
2

Hey @tomasmena!

I moved your reply to a new topic, since this conversation could go on forever :rofl:

You’re right… the world of Web Development has changed drastically since the old days of HTML/CSS/JS into a vast ecosystem of frameworks where it’s very easy to get lost/side-tracked!

There’s also the whole frontend vs backend dilemma that takes a bit to wrap your head around. I’ll confess I’m glad I’m not in charge of any server things at Speckle :sweat_smile:

My suggestion would be to keep these things to a minimum as you’re learning.

  • Frontend frameworks (React,Vue…) are very nice, but not strictly necessary to setup. And as you’ve already realised, they come with their own learning curve’s added on top of JS.
  • Backend frameworks (Fiber, Node) may be necessary, specially if you’re aiming to setup automated workflows in the future, but if you’re just getting started I’d “kick that can down the road”

If your primary goal is to do some Rhino.Compute workflows, then I’d forget about frontend frameworks for now too. Most of rhino’s own examples are pure HTML/JS so they’re easy to follow along with basic web knowledge.

They also have other 3d viewer based examples that are not compute-related.

As far as I can tell, you don’t even need a server to run them, just your local compute instance (same that Hops uses in Grasshopper). So in theory, you could just concentrate on learning HTML/CSS/JS + the rhino libraries, and once you’ve got a good grasp of that, start adding frontend frameworks if needed, backend if necessary… etc.

But you should be able to get an MVP without any of that.

As for IFC.js, although it’s great, they do pull off some magic tricks that will make your head hurt as a beginner, such as the use of wasm libraries, but once you’re acquainted with how they work it’s pretty simple to use.

For a more “web specific” learning path, I may defer you to our web experts @fabians (frontend) or @gergo (backend). They may have better insights than mine (as they’re better at this than me haha)

I’d also be curious to hear @christiandimitri’s take on this, since he’s been diving into the Shapediver/Rhino.Compute world recently too!

3 Likes
3

Alan! Thank you so much for yours suggestions!.
I agree with you, this discussion is an endless one.

I think one of the cool things about @speckle is that opens up our visualization capabilities to the public. It somehow bridges the dedicated 3d softwares for comunicating and visualizating design projects.

With all those computaiton capabilites and API access the real challange for me is acctually visualizing and comunicating what it means in a meaningful and effective way.

1 Like
4

It’s true that there’s a lot to know about web development and there are many tools and frameworks that can be used. Thus I’ll try to simplify your choices a bit:

To build UIs in the browser, you need to learn frontend technologies - JavaScript, HTML, CSS. Learn the basics of these, before you jump into abstractions like frameworks and libraries. Once you can create a basic UI that way you can graduate to the next level - you’ll need a JavaScript UI building framework (e.g. React, Vue; there are others but to simplify things just choose one of these) and usually also some sort of CSS framework/foundation so that you don’t have to style everything from scratch (Bootstrap is a nice option, especially for beginners). Both Vue and React have CLIs for generating skeleton projects with CSS frameworks, linters, bundlers etc. already pre-configured, so for beginners I suggest using those.

Once you’ve learned enough of that, you can start looking into more specific web use cases like rendering 3D stuff with Three.js etc.

Backend-wise - you might not even need it for your app. If you don’t need to persist data in a centralized place (e.g. have user accounts) or off-load heavy processing off the user’s browser or do any kind of work that you don’t trust to be done in the browser (cause it can be manipulated by users easily), then you don’t really need a backend.

Once you do need those things, you can re-use your JavaScript knowledge from the frontend and write Node.js backends. At it’s core Node.js is just a JavaScript environment that can be ran outside of the browser, so you can build servers, CLIs and pretty much anything with it. For your app you’ll be interested in building a server specifically, and while you can do so with pure Node.js and without any frameworks, that’s going to be too complicated and low-level so you should look into server frameworks.

To choose an appropriate server framework you need to evaluate how the frontend (the JS running in the browser) will communicate with the server (an API running on some server somewhere). Personally I find GraphQL (btw the client-side developer experience when working with GraphQL is much nicer in React) the best solution here, but that’s a sort of complicated subject in and of itself, so to simplify things I suggest you just do REST at first - your server would expose a REST API, that you would request from your client.

A nice server-side framework for building a REST API is Nest.js. You might’ve heard of Express.js as a Node.js server framework, but I think it’s too low level for a real web application and Nest.js is much nicer to use.

5 Likes
5

@fabians Great tips!! I need to build configurators for objects, specifically windows (actual real windows as the one we develop at www.schueco.com) .
For that I found this JS library 画门窗. I learnt it´s built on top of this other library called https://konvajs.org/.
I´ve been playing around with it but to acutally build the configurator there are plenty of parts that must come together.
Would you know another approach to build such a configurator?

Best.

Tomás

6

I’m guessing with “configurator” you mean a canvas-based UI for “drawing” out what windows, walls etc. should look like. It’s a fairly specific use case, one that I’m not familiar with, but I’d say that if the libs you found are good enough for you then use them. No need to re-invent the wheel just for the point of doing so.

On the other hand, if none of the existing libraries do what you want, you can try using something like three.js or the other canvas drawing lib you found Konva.js, to create your own configurator UI

1 Like
7

Hey @tomasmena,

I have been really diving into Shapediver/Rhino.Compute to develop Web configurators in the last two years, In order to achieve that, I have been using the web frameworks that @fabians has mentioned above,

I recently published two web configurators for the AEC industry,
here are the links:
link1,
link2

In addition to that, I have a Rhino.Compute boilerplate repo using vue x2 for me to get started at anytime, here is the link, I would be really happy guiding you through it or even participate in the development process

3 Likes
8

@christiandimitri ! That looks great!
I haven´t use Shapediver . Do you have to pay to use their API?
is the API only for JS?
I´ll be really thankful if you guide me using that repo!

Thanks!

2 Likes
9

Hi you all! This is such an interesting discussion! I am currently on the same dilema as @tomasmena trying to figure out next steps

Forgive me if I haven’t understood the whole thing right, but wouldn’t it be a possibility to use a speckle server with GraphQL to fetch information a good solution, therefore maybe learning react (but not necessarily), nodejs and GraphQL?

I am looking for what would be the most standardized solution to develop on top of it, and since speckle is the one trying to standardize data around the AEC industry it only makes sense to me.

Specially cause I know that speckle already uses IFC.js and maybe I don’t need to learn that on the top of the other frameworks. The use case here would be to receive data from archictects (ifc or nurbs) and do engineering analyses.

PS: I btw started to learn vue, nothing I spent too much time with so far, but I was recently thinking to actually learn react, ant the tip from @fabians is now making me think it might be a good idea.

What do you guys think?

10

Hey @ncatunda

It always depends on what you’d want to build. If you need a frontend for your project, you probably should choose between React and Vue and I would recommend Vue in that case. React can be great, but my experience has been, that it has a steeper learning curve associated with it. Vue is a bit gentler to get started with (imho) and it can go a long way too.

You can definitely build on top of our GraphQL api too in any tech stack you could think of basically.

As a getting started idea I also recommend taking a look at some simpler solutions like our Revit Schedules on the web tutorial.