We exclusively use HTML5 instead of XHTML (or even older) HTML-versions. We like the new unity that HTML5 offers and try to keep our code according to the conventions. HTML5 and CSS 3 are natural partners and so it may not be surprising, that we're also using CSS 3. In most projects though, we extend the (already ubiquitous) standard features of CSS 3 through the use of SCSS, which enables us to get better insights into the aggregated, effective rules that apply for specific elements.
Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:
- Vue Styleguidist as our style guide and pool of developed Vue.js components
- Vuetify as Material Component Framework (for fast app development)
- TypeScript as programming language
- Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
- ESLint, TSLint and Prettier for coding style and code analyzes
- Jest as testing framework
- Google Fonts and Font Awesome for typography and icon toolkit
- NativeScript-Vue for mobile development
The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:
- Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
- Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
- Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
- Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
- Large scaling. Vue.js can help to develop pretty large reusable templates.
- Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
We decided to use Python for our backend because it is one of the industry standard languages for data analysis and machine learning. It also has a lot of support due to its large user base.
Web Server: We chose Flask because we want to keep our machine learning / data analysis and the web server in the same language. Flask is easy to use and we all have experience with it. Postman will be used for creating and testing APIs due to its convenience.
Machine Learning: We decided to go with PyTorch for machine learning since it is one of the most popular libraries. It is also known to have an easier learning curve than other popular libraries such as Tensorflow. This is important because our team lacks ML experience and learning the tool as fast as possible would increase productivity.
Data Analysis: Some common Python libraries will be used to analyze our data. These include NumPy, Pandas , and matplotlib. These tools combined will help us learn the properties and characteristics of our data. Jupyter notebook will be used to help organize the data analysis process, and improve the code readability.
UI: We decided to use React for the UI because it helps organize the data and variables of the application into components, making it very convenient to maintain our dashboard. Since React is one of the most popular front end frameworks right now, there will be a lot of support for it as well as a lot of potential new hires that are familiar with the framework. CSS 3 and HTML5 will be used for the basic styling and structure of the web app, as they are the most widely used front end languages.
State Management: We decided to use Redux to manage the state of the application since it works naturally to React. Our team also already has experience working with Redux which gave it a slight edge over the other state management libraries.
Data Visualization: We decided to use the React-based library Victory to visualize the data. They have very user friendly documentation on their official website which we find easy to learn from.
- Caching: We decided between Redis and memcached because they are two of the most popular open-source cache engines. We ultimately decided to use Redis to improve our web app performance mainly due to the extra functionalities it provides such as fine-tuning cache contents and durability.
- Database: We decided to use a NoSQL database over a relational database because of its flexibility from not having a predefined schema. The user behavior analytics has to be flexible since the data we plan to store may change frequently. We decided on MongoDB because it is lightweight and we can easily host the database with MongoDB Atlas . Everyone on our team also has experience working with MongoDB.
- Deployment: We decided to use Heroku over AWS, Azure, Google Cloud because it is free. Although there are advantages to the other cloud services, Heroku makes the most sense to our team because our primary goal is to build an MVP.
Communication Slack will be used as the primary source of communication. It provides all the features needed for basic discussions. In terms of more interactive meetings, Zoom will be used for its video calls and screen sharing capabilities.
Source Control The project will be stored on GitHub and all code changes will be done though pull requests. This will help us keep the codebase clean and make it easy to revert changes when we need to.
What would you choose for a desktop-based Engineering Software that supports multi-OS and has rich UI capabilities considering the .NET dependencies?
Thanks in advance,
I know this is a fairly common question, but I feel like this stuff is pretty dynamic, and things fall in/out of fashion over time.
I am an adult student doing the self-teaching route, and while my grasp on vanilla JS isn't stellar, I feel like it would be a good idea to start incorporating a framework into my learning. I just have no idea which to choose. To be honest, Svelte looks the best to me, BUT I am looking to be marketable in the future, so it's probably best to start with a more popular framework.
React seems to be the obvious answer popularity-wise, but I want to hear updated opinions from people in the field. While I haven't completely defined my focus, I like creating UI's and really have fun with CSS/Sass.
Thanks in advance, and I hope you're all having a great and safe weekend.
I am glad you like Svelte! and I am glad you didn't listed Angular.
You could always learn them at the same time tho! It's really up to you! Have fun
While it's hard to recommend any framework/library, I'd recommend you start with something that is relatively popular and has a little more maturity. I recommend react because it is arguably the most popular out of the three, so you'll easily find support, and most importantly, a job with this. Vue is a good second option, and also great to learn. To my knowledge, it was actually created by some of the original devs of React. Not sure if that's actually true or not. On to Svelte. This one is actually really great, and I love the approach they took with doing all of the "dirty work" at compile-time. The problem is that it's relatively new, not as mature, and while you're never guaranteed to find a job with any language/framework, your chances are considerably less.
All of this being said, while I do recommend what to start with, just to get yourself into the industry. My personal recommendation for your future career, and just for fun, is to learn them all.
I started with Vue/Nuxt before I had strong general JS skills. I was forced to learn React for a project and it wasn't hard to pick up after learning Vue. Once you learn one of the major frameworks, you can transfer those skills to the others without too much effort. They're all doing basically the same thing (they're all essentially MVC component libraries) but with different conventions.
React is the most popular right now, despite having the worst DX of the three. For a newcomer, my recommendation would be to either 1) focus on React/Next, and push through the higher learning curve or 2) start with something more comfortable like Vue/Nuxt or Svelte/SvelteKit, then learn React/Next to be more marketable. It won't hurt you to have another library/framework in the skills section of your resume.
This is most important: as a newcomer, whatever library you choose, start with the framework. For Vue, start with Nuxt. For React, start with Next, etc. For me, it was MUCH easier to learn Vue using Nuxt and single file components than it would have been to learn the Vue library by itself.