Firebot V6 Tech Explanations

Electron

If you understand, even a little, of how nodejs or a web browser works then working within electron will not feel any different. Electron is a fork of nodejs with the chromirum renderer containing all the native functionality you are used to. The only thing you need to understand is that Electron apps are broken up into two processes:

• Main process: this is for the most part a nodejs instance where you have access to all of node's features and modules: fs, net, etc. For those with a webdev background it is in essence the server.
• Renderer processes: This is a chromium browser window of which you are restricted to functionality and security protocols of a typical browser. It serves as the UI for Firebot, in essence it is the browser or client.

These two processes are tied together and communicate via an Inter-Process-Communicator("IPC"). We have abstracted the IPC in such a way you should not have to touch it; instead you just need to go through the appropriate abstraction we provide. For those of a webdev background, the IPC and its abstraction take the place of web requests and websockets for client-server communications

Reactjs

React is a library for creating and manipulating Firebot's UI. React is only used by the renderer process and as such if react is not welcoming to you then you do not have to touch the UI. You are more than welcome to concentrate on main process development.

TypeScript

Typescript("ts") is a superset of javascript; it is javascript with added features. When firebot is compiled, the typescript compiles into standard js. Its fairly quick to pick up if you have javascript experience. For some it may be quicker to pickup than javascript as the language is more verbose with it's strict typing making code far more clear as to what 'things' are.

TSX

Where typescript is a superset of javascript, tsx is a superset of typescript. It allows developers to include html (and in our case reactjs) elements directly in our source code; no quoting strings or calling DOM functions. If you are at home with html and js/ts then picking up tsx should be well within the next step.

Webpack

Webpack for us serves a few functions in our development pipeline. It compiles our typescript, tsx and sass/scss then bundles it all into a single .js file. As its already been setup for the project, you should not have to touch it at all, thus it is of no concern to you. Think of it as magic that gets invoked when we build the project

ESLint & Prettier

ESLint serves the purpose of catching syntax and coding errors before they make it into a build. It enforces a strict set of rules of how logic should flow. If the logic flow violates those rules, it will warn you of such instances.

Along with ESLint, we've included a library that auto formats your code in regards to whitespacing. Once linting is successful, prettier will automagically format your code.

As a developer you should not need to touch or interact with either of these. They have already been implemented and should work out-of-the-box once you have the project on your computer and setup for developement.