Firsthand Front-end Frameworks’ Tips and Tricks

I spent some time interviewing my colleagues, gathering useful tips from various Pentalog developers in regards to front-end frameworks and compiled them here. No matter what JavaScript framework you use it helps to know how to best leverage its strengths for your IT project.

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?

Mihai: My favorite framework so far and the one I’m currently using is ReactJS I know React by itself is actually a JavaScript library, but the many modules you can include make it very easy to transform it into a fully-fledged front-end framework. I am currently using to develop all kinds of features, from GPS tracking to displaying intricate graphs and also for desktop web apps. It still amazes me how easy ReactJS makes it to implement complex features. I can say that I am very pleased with the performance even for such request-heavy processes.

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.

Pentalog developers know how to use a different range of JavaScript frameworks. Learn lesser known tips from them and apply them into your work.

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?

Sidona:
– 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

Immutable objects cannot be modified once created, and when it comes to a library whose performance is based on server-side rendering, that inherent thread safety can lead to less headaches and better performance overall. Now you could choose to achieve immutability in JavaScript the old fashioned way by writing extremely careful code, or you could simply use Facebook’s immutable.js and gain access to persistent immutable data structures that can be used in your application to improve rendering performance.

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.

One of my favorite techniques involves testing the code by following Test Driven Development or Behavior Driven Development processes. Using “karma” as a test runner and writing unit-tests with jasmine (a behavior driven development framework for JavaScript) helps me write code and structure tests quickly while also making assertions.

Read more about Angular and React in a comparative article about the two front-end frameworks.

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.

A few useful tips regardless of the (javascript) framework which I’ve learned the hard way:

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.

If you have any questions or need our help to launch your project, contact us!

Read more about our most successful projects built using Angular and React