How I setup my Babylon projects
Workflows for web development changes fast and many still disagree on best practices. This is an overview on what I’ve found to be successful and the trade-offs I’ve made with this approach.
Programming Language — TypeScript
I find that I am currently most productive in TypeScript. Optional variable typing strikes a great balance between being able to churn out quick code for one off tasks and providing rich auto complete when needed to build larger maintainable applications. Babylon.js is written in TypeScript so all the autocomplete comes for free when using the library and it makes it that much easier to explore it’s code base when contributing to it.
JavaScript is the central language of the web and works out of the box but it has many quirks and the lack of typing makes it more challenging to build complex code bases quickly. This makes typeScript worth the extra compile step to convert it to JavaScript before it runs in the browser.
Rust + WebAssembly is another alternative I keep checking in on and tooling for this keeps getting better every time I take another look at it but from my current assessment it is still too early to adopt as just setting up a hello world project can result in hitting issues that are hard to debug with the limited documentation out there compared to JavaScript or TypeScript.
For most of the web development I do I end up providing both the front-end and back-end code. Because I use TypeScript on the front end, having the overhead of context switching to another language for the back-end is not ideal from my experience(eg. C# .Net/Go/Rust/Ruby/PHP).
NodeJS is a great choice because it can be used with TypeScript as well and because it and it’s package manager NPM have become so popular it is easy to find high quality libraries others have built and decent documentation online. Running code asynchronously using async and await keywords is enjoyable and makes it fast as well. The Express library is chosen as it is the most popular among Node users and is very easy to get started with due to their minimalist approach.
Bundling — webpack
Bundling allows you to combine and minify js/css/asset files to a single file which can improve loading times when a user loads your web page. They also really (web)packed a lot of features into how you can configure it which can come in handy with complex build systems. It will also allow you to use the same import syntax you would use in NodeJS for your front-end TypeScript files.
import { ZipCodeValidator } from “./ZipCodeValidator”;
Other alternatives include Rollup or Parcel. Parcel seems to work very well for smaller projects but I ran into issues when straying off their golden path scenario. Overall webpack seemed like the most stable solution but even that has its quirks when needing custom functionality.
3D Graphics — Babylon.js
I help develop Babylon.js at work so I may be a bit biased here but it really does make 3D easy to get started with. The forum is full of helpful and friendly users. Avoiding breaking backwards compatibility is a high priority. Many users who have switched to Babylon have shared that they’ve seen boosts in performance. Babylon always supports the latest specifications (glTF, PBR) and browser features (WebGPU, Multiview). Some other alternatives would be Twgljs, ThreeJS or AFrame which are also pretty great.
I’ve found that for my rather small personal projects VueJS did what I wanted without massively changing the way I write front end code. When comparing it with other popular libraries like React I found the view definition being mixed with the js logic and additional boiler plate code needed to be a bit overkill for what I needed to do in the past.
To get nice looking css I usually go with Bootstrap as it is battle tested by Twitter and generally gives a nice look with minor tweaks. Another alternative is Foundation which I’ve found almost equally as good.
Database — PostgreSQL + Typeorm + Redis
For a database I usually choose Postgresql as SQL databases have proved they can be scale up for extremely large projects. MySQL seems to be another good alternative but based on most anecdotes I’ve read on Hackernews most people are starting to prefer Postgresql but the overarching theme is if you are running into limitations with your SQL database you likely aren’t using it correctly and reorganizing your data or adding a caching layer is likely the answer and at a previous job we used Redis which seemed to do its job.
To interact with with SQL databases from NodeJS I’ve used Sequelize in the past but have recently moved to Typeorm as it seems to have superior typing support out of the box.
Hosting — Azure
As I work at Microsoft, Azure is definitely my go-to for hosting services. I typically use a custom virtual machine that I can ssh into as it makes it easier to test locally and deploy using the steps but have consider using their content delivery network for faster static file serving. Azure functions also seems good to save on costs and to better handle scaling if you get a sudden increase in traffic.
WebSockets — SocketIO
For more real-time web applications, web sockets are definitely the way to go, there are a couple different options out there but I havn’t needed to try them as socketIO did exactly what I expected it to. From building a simple chat system to a complex multiplayer first person shooter spamming position updates multiple times a second SocketIO performed better than I expected. Of course due to the restrictions of the browser this will never be as optimal as using a UDP connection as the web only support TCP at this time but even so it has worked well from my tests. I’ve also heard some good things about SignalR but have not tried it personally.
Asset creation — Blocks
When it comes to creating 3D objects for a 3D application it can be incredibly difficult to learn tools such as Blender, Max or Maya. Blocks provides an excellent experience for even the most novice artist with relatively good output with minimal time. If you have a VR headset I would definitely recommend giving it a shot. Sure the output won’t be as high quality as using more professional tools but for a side project it definitely does the trick. The only problem is it doesn’t have any support for animations so Ill have to export the the file and then add any animations in post using another tool like Blender. Also their glTFs that they export do not seem to match the latest spec so I would export to obj + mtl and use this converter to convert to glTF/glb.
Thanks for reading this and I hope it provides some insight into the tools I use but unfortunately in the time it took for you read this I’m sure I’m using completely new tools 😂.
You can find what I’m currently working on here:
https://github.com/TrevorDev?tab=repositories
And follow me here
