Rundown of front end technologies

As an unexperienced starting developer I find that learning Motoko isn’t as hard as actually wrapping my head around the broader pallet of technologies used on the front end.

The assets canister in the hello world (and the declarations) contains Candid, .js and .ts files. Also we find webpack and npm in the root of the project.

I know this is independent of the IC, but I would love to hear someone give a talk about how all these technologies work together to build clients that interact with the IC.

I would love to know what the assumptions and reasoning is that makes the frontend like it is. Mostly I would love to learn how javascript / typescript uses agents to communicate with actors on the IC. Also a deep run down of the generated decelerations. Why are both js and ts used? What is webpack doing? etc.

4 Likes

Some resources that might help:

JavaScript is the lowest common denominator for running in browsers so that pretty much has to be used. TypeScript is popular and so is also provided for people using that but if you’re not using it, or use some other compile-to-JS language, you can ignore those files.

Webpack is bundling all of the sources files used in development and preparing them for production. Depending on your configuration, this could include various transformations that aren’t necessary during development, or would make development too slow. It also provides a dev server so that you can iterate more quickly on your UI without having to deploy the front end to a canister after every change.

4 Likes

It would be great to get a minimum viable app that was just html + the agent.js required to talk to the ic.

There are so many tiny apps that could be done.

With http_request_upgrade we could even see some pure html form based apps.

1 Like

Also: Create a new project 👉 npm init ic

1 Like

Thank you! Will try out later today I hope.

Thank you for the resources.

What is a good place to start learning about how javascript or typescript are used to read in the Candid interface file and use it to communicate with the IC? I’m a details kind of a guy

I think dfx creates a copy:types entry under scripts in package.json which copies from .dfx/<network>/canisters.

If you look in that directory, probably .dfx/local/canisters, each canister has a directory that contains generated JavaScript.

So, JavaScript isn’t used to read the Candid file, but rather the Candid file is used to generate some JavaScript which knows how to encode and decode it.

@bobbylingus I’ve written a bit on this topic - although I haven’t published it as official docs yet. Feedback is appreciated!

1 Like

This page is a handy reference for which types to use, also linked in Kyle’s article above: https://smartcontracts.org/docs/current/references/candid-ref/#supported-types
Check the “Corresponding JavaScript values” under each entry.

Wow Kyle! At first glance, this seems exactly what I was looking for. I’m not very experienced in JS so I need this kind of stuff. It all starting to make sense for me :slight_smile:

I will dig into it soon. Thank you gorgeous :wink: