I have no background in computer science, I picked up JavaScript from an online tutorial and later from JavaScript: The Good Parts. I have an adequate understanding of the various parts of the language and syntax. I can string them together to make useful code but as soon as I begin a project, I get this vague feeling that I’m about to hit a wall and start over. It’s as if I have no idea how to make the jump from small code to medium-big.
My main interest is animations, therefore it’s a mix of JavaScript and its weird animation cycle. Should I write the mechanics first and worry about rendering later? What design considerations or patterns do I need to be aware of in order to write modular code?
I guess my question is, what are the steps to writing an actual application? How did you do it?
It depends entirely on what animations you are trying to create. For some of the animations I work on, I just create them in a semi-sloppy way to figure out how to get the desired output. For animations I intend to share more broadly, I try to ensure I’m following decent coding practices.
If you are looking for something very prescriptive, I always start with the requestAnimationFrame callback and start slowly building from there
I think animations in particular are a little tricky because you can do a lot with CSS. Sometimes its hard to know when you need JS at all. Sometimes you can have animations without JS entirely. Others a thin layer of JS is used just to trigger ot turn them off etc. But once you get into the more complicated things (maybe from medium up to large?) you might need to do a lot more with JS.
If going full JS, as kirupa said, requestAnimationFrame is going to be your main driver for your animation loop. Then a lot of what you’re probably going to be doing is either driving a timeline or doing some kind of property interpolation over time. How you do that is up to you; there’s not necessarily any one right way.
But also, if you’re not so interested in figuring it out yourself and just want to get it done, you may instead look to existing animation libraries that package things up in nice, easy-to-use APIs. Then you don’t have to worry about all the details and can just do things like
There’s a lot you can do with off-the-shelf libraries. I personally don’t tend to write applications this way because I like getting my hands dirty and doing things from scratch because I can also learn a lot by doing that, but if you’re just looking to build things, you can look at what’s already been made to help you do it.
I just happened to be watching this recently (been getting a lot of GDC recommendations from youtube lately) where a guy was talking about a pretty slick looking app that he made using existing libraries pretty easily:
A lot of web applications today will use libraries or frameworks like Angular, React, or Vue. They help you manage components and data and things like that, but there’s still a lot of work you’d need to do. But there are other libraries built off of these which can do even more. It depends what you’re after and how much work you’re willing to put into it.
I don’t have experience with mid-sized projects, so I never really picked up good coding practices. I could be sloppy to start with but then if I feel like adding functionality to my work later it’s going to fail. In actuality I don’t even know how to approach a mid-sized project. I wouldn’t know where to start with or how to handle different states of the program all the while maintaining good standards for the sake of being able to retouch later.
I tried p5js and for what it’s worth it was a bit of a turn off. Some things didn’t work as expected (eg. mouseIsPressed registers different amount of clicks across browsers). The library added too much overhead and I also felt that if one day the library ceases to get support, I would have to port my work elsewhere. That’s one worry I didn’t have with core stuff like raw Canvas. I suppose I’ll just have to get my hands dirty with requestAnimationFrame and make mistakes like everyone else has.
