Rundown of front end technologies

Developers Getting Started
1

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.

6 Likes
2

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.

6 Likes
3

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.

2 Likes
4

Also: Create a new project 👉 npm init ic

1 Like
6

Thank you! Will try out later today I hope.

7

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

8

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.

9

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

5 Likes
10

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.

1 Like
12

I finished my draft a while ago and published Internet Computer Content Validation Bootstrap

Just wanted to update this thread

2 Likes
13

That link doesnt work for me :confused:

1 Like
14

I just added a redirect. Should work again in a few minutes

1 Like
15

This is a demo project I have provided for the Motoko Bootcamp 01/2023

2 Likes
16

Hi @kpeacock your link seems to be broken ?

17

Looks like the redirect doesn’t work. The new link is Internet Computer Content Validation Bootstrap

1 Like
18

Whatever we have done here should be reversed or fixed globally. Google search results of the docs lead to “Page not found”, this basically rendered a huge amount of links that used to work unusable. It doesn’t make sense to fix them all manually …

5 Likes