If you want to pick up some lesser known tips and learn about how our developers work, four Pentalog IT experts will share their knowledge below on Angular, React and Vue, which are some of the most popular front-end frameworks used to create websites.
ReactJS: “I am very pleased with the performance of this front-end framework.” – Mihai, Front-end Web Developer, Pentalog Cluj
What framework do you use and how do you use it?
Do you have any ReactJS tips?
Mihai: Here’s a few interesting things to know:
– Try to avoid using inline styles: React makes it very easy but I believe CSS should remain CSS (or LESS, SASS, etc.).
– Avoid over-modularity: creating components is easy and great, but it should be done only if it is absolutely necessary.
– Take advantage of the large ReactJS community: I noticed that for almost all the issues I run into and questions I have it is possible to find valid answers or work-arounds posted on stackoverflow or on blogs.
– Make use of existing modules: If complex logic is needed across the application it is almost certain that someone has already built a module for it. Just find it and then all that you need to do is to include it and use it.
– Make sure that what you include does exactly what is needed and not much more: some components offer vast functionalities from which only a tiny part of it might be used. Try to find a module that fits your needs as closely as possible, taking into account the project’s technical documentation and community.
React: “The web interfaces you create with React are flexible, fast, and lightweight.” – Sidona, Front-end Developer, Pentalog Brasov
What framework do you work with and how do you use it?
Sidona: I like using the React front-end framework. React is a UI library developed by Facebook to facilitate the creation of interactive and reusable UI components. It is used by Facebook for different production projects and Instagram.com is written entirely in React. Because of its reusable components and unique data rendering approach, the web interfaces you create with React are flexible, fast, and lightweight.
What are your React tips?
– Use props and state:
Props and State do similar things but are used in different ways. The majority of your components will probably be stateless.
Props are used to pass data from parent to child or by the component itself. They are immutable and thus will not be changed.
State is used for mutable data, or data that will change. This is particularly useful for user input. Search bars are a good example. The user will type in data and this will update what they see.
– Use should Component Update
React is a templating language that renders EVERY TIME the props or the state of the component changes. This means the entire page has to be rendered every time there in an action. This takes a big load on the browser. This is where ShouldComponentUpdate comes in, whenever React is rendering the view it checks to see if shouldComponentUpdate is returning true or false. So whenever you have a component that’s static do yourself a favor and return false. Or if it is not static check to see if the props/state has changed.
– Use Flux or Redux
When dealing with data you want to use either Flux or Redux. Flux and Redux allows you to handle data easily and makes handling front end cache less painful. I personally use Redux because it forces you to use a more controlled file structure.
Keep in mind that sometimes it is very useful to use Flux and Redux but you might not need to keep the entire state of your application in one plain object.
– Use immutable state
Angular: “Good habits will drastically improve your productivity and code quality.” – Dan, Full Stack Developer, Pentalog Bucharest
What’s your preferred framework and what do you use it for?
Dan: I’ve been using different frameworks lately but I’d say that I prefer Angular. This front-end framework is extraordinarily expressive, readable, and makes for quick development.
I’m using Angular on a daily basis together with other frameworks when I need to work with different attributions. You just have to make sure you use it right or you will end up creating messy code and a very slow application.
What are your Angular tips?
Dan: Good habits will drastically improve your productivity and code quality.
My tips are based on maximizing productivity and code quality which are the most important aspects of the development process in my humble opinion.
Increasing productivity is one of the most important things to do because it will leave you with more free time to dedicate to the development process that can be used for code quality or something else.
VueJS: “. I’ve never felt more familiar with a front-end framework as with Vue.” – Sebastian, Full Stack Developer, Pentalog Brasov
What’s your preferred framework and what do you use it for?
Sebastian: I’ve ended up using VueJS by “accident”. As a PHP developer, I use mostly Laravel and the latest versions are bundled with VueJS so I gave it a shot when prototyping. That accident” changed the way I code in front-end. I’ve never felt more familiar with a front-end framework as with Vue. It doesn’t alter the plain old HTML too much and the markup feels a bit like Angular, but simpler.
What are your VueJS tips?
Sebastian: As anyone will tell you, make sure you go with the (documentation) flow. It’s pretty detailed and it covers most of the edge cases. Try to respect the “parent passes properties and children emit events” style, as this is a reactive framework.
Nailing a balance with the amount of components is a bit tricky, but a loose rule of thumb is when you loop data in the template, you kind of do it passing props to components.
What Redux is for React, Vuex is for VueJS. It works in a similar manner, providing support for state management and it has some mappers to bind actions, getters or state in the (Vuex) store to methods or computed/cached properties in components; and if you use ES6, you get bonus style points for code readability. I strongly suggest you use this for global state management, as it’s easier to share this between unrelated components.
If you’re building an application, use Vuetify (material design). Version 1 got out of beta and the community is very active. It’s what we use for our current back-office project.
If you are building a website, try to find a-la-carte libraries, which are libraries that can be used by importing only what you need, decreasing your bundle sizes when using Webpack chunking – which you should totally use; otherwise, initial load time it’s going to skyrocket.
VueJS is compatible with most testrunners like Jest, Karma, Mocha, Jasmine so don’t forget to write testable code, wrapping all ajax calls in mockable functions.
Hopefully, these tips and tricks will help you build better and nicer websites.