Episode 6: JavaScript Modules & Build Tools

Slides

Exercise Options

  • Export something you made in VizHub
  • Put it in a GitHub repository
  • Adopt a build tool (Webpack, Rollup)
  • Try a newer tool (Parcel, Snowpack)

thanks for the excellent episodeā€¦ got to get used to build toolsā€¦

Is there a class going on? where can I sign up?

@kuankuan27 Itā€™s a long running live stream series. Here are some entry points for it:

An experiment of mine using rollup.js with a project coming from VizHub

Hey @curran, for me it is not interesting to do it locally. At least yet. I usually do my stuffs with python/django, soā€¦ long excuse short: I havenā€™t made exactly the exercise you asked (export it locally). But I indeed learned a lot. And here is a code that I studied and fixed to run in vizhub:

When will be the next class??

1 Like

Very nice!

The next class will be this Saturday. See you then!

Why not both? You can always use Django, Flask or any other Python-based Web framework as a headless backend to expose APIs consumed by your bundled D3 Vizzes :slight_smile:

PS: Just 3 things about your Gantt: cool, cool, cool!!!

1 Like

Another experiment, this time with Vite (the name comes from the French word for ā€œfastā€, pronounced /vit/ [ā€œveetā€] ):

With a very minimal configuration you can:

  • start a dev server (with browser livereload included)
  • bundle your project dealing with HTML/CSS/JS, cache busting, minification, etcā€¦
  • serve your bundle for a preview
1 Like

Hey Floating Purr (@floatingpurr aka Andrea) , thank you!! The merit for the gantt actually is not mine (and I canā€™t say it belongs to the place Iā€™ve ā€˜snuckā€™ from (it is in the readme file, first line).) I just read the code and ā€˜transposeā€™ using what Iā€™ve learned so far to make it work here. Add few small features on the way. But hey, thank you!!

And how cool is yous? WOW!! ezgif.com-gif-maker (1)

1 Like

Hey Felipe @maion, I do believe that even ā€œjustā€ tweaking code isnā€™t a trivial task if someone is not aware of the logics behind the scenes. So, great job!

The mine is just a little variation on the exercise of Episode 5.

Bye!

1 Like

Hi Curran!

Thanks so much for these episodes!! Saturdays are busy for me most of the time, but I still think the live format is lots of fun!

I have no problems running my vizzes out of my editors with some extensions like Live Server for VS code, etc. What are the advantages to using build tools instead?

Git here for reference:

Side bar, I was so close to making this animation work, but I got stuck. Any ideas? Iā€™m so excited to be making things move I canā€™t even sit still.

1 Like

@Andre Amazing! The main advantage of using build tools is that you can author your code as ES6 modules. That repo has the build tools set up to generate bundle.js from ES6 modules.

I think Iā€™ll use vanilla HTML in todayā€™s session, to illustrate the option of not using any build tools.

Looks like you got the animation to work. Congrats! Very fun.

1 Like

I seeeeee thank you!!!

1 Like

Nice exercise. So I did set the Vizhub project https://vizhub.com/yiorgosbagakis/3697d057d58a40dc8b48b0e388bf46e2?edit=files
locally with Roller and then deployed it on a Github repository: https://github.com/yiorgosbagakis/worm-animation

here it is live on github pages: https://yiorgosbagakis.github.io/worm-animation/

Then I did a setup with Vite: https://github.com/yiorgosbagakis/vite-worm-animation

I used the Vanilla preset of Vite but I had to remove much of the initial files like the logos and the unused css. I kept their convention and renamed the index.js into main.js and imported the css file into it as well. Kept the vite favicon :smile:

Amazing! Thank you for sharing.

Vite is an amazing tool and Iā€™ve been using it for my proprietary work. I love the hot reloading feature most of all.

Iā€™m thinking about modifying the VizHub export to use Vite out of the box, so it would be a great and familiar experience after you ā€œejectā€ out of VizHub. The VizHub build system and Vite are very similar.