DEV Community: Nicolás Gómez

¿Qué es lo mínimo que debes saber para considerarte full stack developer?

Nicolás Gómez — Thu, 14 Jan 2021 00:19:38 +0000

Muchos dicen que para ser full stack tienes que saber mil cosas e incluso que los desarrolladores full stack no existen (o que son unicornios 🦄).

La razón de esto es que los full stack se mueven en distintas capas de un proyecto de software: en lo relacionado a interfaz de usuario (frontend), en la parte de procesamiento y entrega de datos (backend), entre otras cosas. Y para dominar cada una, se necesita manejar muchas herramientas.

Como cada mundo involucra miles de tecnologías, ahora nos hacemos la pregunta: ¿qué es lo mínimo que debe saber un desarrollar para considerarse full stack?

Definición de un desarrollador full stack

Antes es importante ponernos de acuerdo de qué es un desarrollador full stack.

Muchos piensan que un full stack debe dominar todas las tecnologías de frontend y de backend. Algo difícil de lograr...

A mí me gusta usar una definición más amplia:

Desarrollador full stack: Alguien que es capaz de crear una aplicación que involucre interacción con usuarios finales y también procesamiento y entrega de datos.

Esta definición tiene 2 consecuencias:

Se basa en lo que una persona es capaz de lograr y no a lo que se supone que sabe.
Las tecnologías y herramientas quedan en segundo plano, a servicio del profesional. Tal y como debe ser.

Ahora sí... Lo mínimo que tienes que saber para considerarte full stack

Debido a la definición anterior, tienes que saber crear aplicaciones que involucren el mundo del frontend (interfaz de usuario) y del backend (entrega y procesamiento de datos).

Como son muchas aristas y tecnologías, el full stack es capaz de complementar los conocimientos que tenga más débiles o que no le interesen.

Hay muchas combinaciones que logran esto:

En vez de aprender sobre servidores, devOps y sistemas operativos (donde colocas tu aplicación "backend") puedes aprender una herramienta tipo Heroku que hace todo esto por ti.
En vez de aprender a crear backend complejos desde 0 puedes utilizar un framework con muchas cosas ya hechas (Ruby on rails, Django, Laravel) o incluso puedes usar "backend as a service" tipo Firebase.
En vez de aprender a hacer frameworks frontend desde 0 puedes usar herramientas ya existentes como Angular, Vue o React.
En vez de aprender CSS puedes usar templates ya hechos.
En vez de aprender a desarrollar en Android (Java/Kotlin) e iPhone (Swift) puedes usar React native (javascript) o Flutter (Dart) para crear plataformas en ambas plataformas.

Esto nos abre las puertas a muchos perfiles interesantes.

Ejemplos de perfiles de desarrollador full stack

Algunos ejemplos de perfiles full stack:

Javascript con jQuery + Firebase
Ruby on rails en AWS on react
React Native con Django en un VPS
React native con Nodejs sobre Heroku
Vue con Laravel en docker sobre AWS
AWS Amplify

Mi elección personal

Yo me considero un desarrollador full stack por que he hecho varias aplicaciones que involucran ambos mundos de manera exitosa.

Para que tengas una referencia, mis elecciones tecnológicas son:

Backend: me considero buen backend con Ruby on Rails (RoR). Lo aprendí mientras estudiaba y desde ahí que quedé enamorado del framework. También manejo bien node.js, pero mi elección casi siempre es RoR.
Frontend: por temas de trabajo tuve que aprender React. No me encanta, pero hace bien su trabajo.
UI: no soy experto en CSS. Por eso, suelo utilizar frameworks de CSS, como por ejemplo Bootstrap o AntDesign.
Devops: nunca me gustó lo relacionado con servidores. Así que mi elección es utilizar Heroku.

How to style your React application?

Nicolás Gómez — Thu, 17 Sep 2020 20:46:46 +0000

I built my first app. It works. Now how the heck do I go about styling it?

When building a React application, you get to a point where it is fully functional but it doesn't look like you want.

We as developers focus on how things work, not on how they look. Until we realize that our little baby is ugly 😭 so then we start styling and resizing here and there to make it prettier.

But how the heck can we style all of them in a way that is efficient and makes sense?

The fastest way to style your React app

As you may be guessing, the fastest way to style your React app is by using a UI library that do all the heavy lifting for you.

When using UI libraries, instead of playing with margins, paddings and sizes, you just use the components the library provides. In the end, you save time and win styling consistence.

The next question is: What UI library should you use?

There is not an "industry standard" when choosing library, but the commonly used are:

My personal choice is Bootstrap or Ant Design. Bootstrap for simple apps without many functionalities and Ant Design for the rest.

Why Bootstrap? I have experience building static sites with HTML + CSS + Bootstrap. So, I can leverage my knowledge in this framework with React.

Why AntD? Two reasons. The first one: the documentation is awesome. I rarely google AntD stuff when using this framework. The second reason is that it has MANY components. When using it, I feel like they have though in everything. Its magic.

MaterialUI documentation is pretty good too. But in my experience it is a bit harder to customize and I feel like all apps made with material design looks like Google apps. Which is not bad BTW, I just don't like it.

I can't say much about the rest because I haven't used them, but I know that they are safe bets. So, my advice is: choose the one that looks similar to what you want to accomplish.

At some point in the project, you will realize that your app needs some personalized touch. Which leaves us to...

Color personalization: how to choose your App colors?

Many libraries have primary or secondary colors you can change. The defaults are good, but what if you want to add personality to your app? What colors should you use?

My design knowledge is zero. So, I usually use palette color tools such as colorhunt or coolors, where you can pick one visually:

Color Hunt example

For a Chilean Tax payment calculator I made, the colors I used was a variation of this palette:

Color hunt in action

Using palettes, you can choose one that looks good for your project.

If you already know the main color, you can use Adobe Color Wheel to get the rest:

Adobe Color Wheel

Personalization is not all about colors. Sometimes you will have to make a component and styles by yourself.

7 Practical Tips for Cheating at Design is a good post to avoid common design mistakes and to make your apps looks more professional.

There are many ways to add styles to your React components. See How to CSS Style in React for a good summary of the approaches. I have been used mostly css-in-js with react-jss, but I don't have a strong opinion about this.

If you're lacking of design ideas, knowing how to add your own style is not enough. And when you're lacking of ideas...

Where to look for inspiration?

When I'm lost, I usually go to Dribbble for inspiration. Or I look at the apps I already use.

For example, I was building an app with Chat functionality and the framework (React with Ionic) didn't have components for this use case. I ended with this:

Chat example

Which was based in this dribbble and on Facebook Messenger.

Final notes

In summary:

The fastest way to make a good-looking React app is by using a UI library. Choosing a popular one is a safe bet, so choose one based on what you are going to build.
The low-hanging fruits in personalization are colors. To choose a good set of colors, you can use Color Hunt.
When the UI framework is not enough, you'll need to make a custom component from scratch. You can use tactics to improve your design and you have many choices to style it. Lacking of ideas? Use Dribbble for inspiration.

Bonus: just found Design Resources for Developer in GitHub, looks awesome!

What is useRef for? When should I use it?

Nicolás Gómez — Wed, 09 Sep 2020 20:24:22 +0000

If you have tried reading the docs over and over again but you still don't understand useRef, this post is for you!

What is useRef?

useRef is like a box where you can store something for later use. A number, an object, anything you want.

useRef

The thing you save in this box is preserved between renders, similar to useState. In other words, the box is not destroyed when your component is updated.

And when you change the box content, nothing happens to the component. The box content changes, but the component remains the same.

Observations:

Unlike component state variables (useState), updating a ref value doesn't trigger a new render.
Are you coming from class components? Ok, it is like storing something in an instance variable (this.value = someValue).

What is it used for?

Ok, cool. useRef is used to store something in the component "memory" but it doesn't trigger a new render when the value is updated.

But what is it used for?

Well, there are two main use cases:

1) To store DOM elements so you can later do something with it.

For example, you can focus the password input when the user press "ENTER" on the email input:

Focus the next element when pressing "ENTER"

You can do it with useRef (source code):

export default function App() {
  const emailRef = useRef();
  const passwordRef = useRef();
  return (
    <div className="App">
      <p>
        <label htmlFor="email">Email:</label>
        <input
          id="email"
          ref={emailRef}
          onKeyPress={({ charCode }) => {
            if (charCode === 13) {
              passwordRef.current.focus();
            }
          }}
        />
      </p>
      <p>
        <label htmlFor="password">Password:</label>
        <input id="password" ref={passwordRef} />
      </p>
    </div>
  );
}

useRef example to store reference to an input component

2) To store values you want to keep an eye on

Sometimes you want to keep an eye on a value but you don't need to trigger new renders when it changes.

Example: storing the previous value of a state variable.

This is a simple application that display a counter and its previous values. It also has two buttons to increase the counter (by 1 and by 10):

Example of useRef to store a previous value

Source code:

function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current;

  return (
    <div className="App">
      <h1>Previous value with useRef</h1>
      <p>
        <button onClick={() => setCount((value) => value + 1)}>
          Increase counter by 1
        </button>
        <button onClick={() => setCount((value) => value + 10)}>
          Increase counter by 10
        </button>
      </p>
      <p>
        Now: {count}, before: {prevCount}
      </p>
    </div>
  );
}

useRef to store a previous value

How to manage snake case for backend (Django, Rails) and camel case for React?

Nicolás Gómez — Tue, 28 Jul 2020 16:43:51 +0000

Let say that your backend framework is Django or Rails. The data you get and send must be in snake_case because this is the convention in these frameworks.

But when handling this data in your React App, you'll be using JavaScript where the convention is camelCase...

How can you solve this without making your Linter go mad? Should you break the convention for either Rails or React?

If you don't mind breaking name conventions, go ahead and use snake case in your React App (sorry Linter! 💔)

For the rest of us, I have a solution:

after retrieving data from your backend, transform it to camelCase
before sending data to your backend, transform it to snake_case

Why in client code you might ask? Well, because 99% of the time you will be adding somekind of fetch wrapper in your app (for example, to transform the responses to JSON). Just extend it a little.

Show me the code

The transformation is easy because there are packages for it. I'll be using humps, which is a Underscore-to-camelCase converter (and vice versa) for strings and object keys in JavaScript.

after retrieving data from your backend, transform it to camelCase:

// api.js

import humps from 'humps';

export async function get(url) {
    return fetch(url)
        .then(response => response.json())
        .then(json => humps.camelizeKeys(json))
}

get wrapper

before sending data to your backend, transform it to snakeCase

// api.js

import humps from 'humps';

export async function post(url, data) {
    const body = JSON.stringify(humps.decamelizeKeys(data));
    return fetch(url, { method: 'POST', body })
        .then(response => response.json())
        .then(json => humps.camelizeKeys(json))
}

post wrapper

Then in your React components use your new functions and you're done!

Example

Demo

There is the code of example App using PokeApi:

import React, { useState, useEffect } from "react";
import "./styles.css";
import { get } from "./api";

function PokemonCard({ name }) {
  const [pokemon, setPokemon] = useState(null);

  useEffect(() => {
    get(`/pokemon/${name}`).then(data => setPokemon(data));
  }, [name]);

  if (!pokemon) return null;

  const src = pokemon.sprites.frontDefault; // camelCase :D

  return (
    <div
      style={{
        margin: 10,
        width: 96,
        height: 96,
        display: "inline-block",
        backgroundImage: `url(${src})`
      }}
    />
  );
}

export default function App() {
  const [pokemons, setPokemons] = useState([]);

  useEffect(() => {
    get("/pokemon?limit=150").then(data => setPokemons(data.results));
  }, []);

  return (
    <div className="App">
      <h1>Pokemons!</h1>
      <div>
        {pokemons.map(({ name }) => (
          <PokemonCard key={name} name={name} />
        ))}
      </div>
    </div>
  );
}

Example App using our API wrapper

Why it works

Most React apps needs some-kind of wrapper for requests. It could be to transform all requests to JSON, to add authentication tokens, etc. So extending the wrapper a little for transformations is okay and straightforward.
Sometimes you won't be able to touch your backend code. In this case, any transformation should be done in client (React) anyway.

List of Open Source React projects on GitHub to learn from

Nicolás Gómez — Sun, 10 May 2020 23:15:10 +0000

As you grow your knowledge in React.js, you will notice that there are many sources with simple code examples but only a few of advanced stuff. And many of them have "outdated code" (no hooks, class components everywhere, etc).

What if you want to know how to structure a medium to large codebase? Or if you want to know if you are doing everything fine?

One way to improve your skills is to study what other devs are doing. How they approach their projects can teach you lessons that maybe will take you weeks to learn.

That's why I made this list of open-source React.js applications you can learn from. All uses modern features such hooks, context and many uses redux-toolkit. So, no matter if you already have hit a plateau as seasoned developer or if you're just starting, take a look!

1) Take Note – Live | Repo

Take Note is an open-source project to take notes, known as The Note Taking App for Developers

It's a simple plain-text take note app with markdown support. Without all the fancy stuff that we don't need :)

The code seems to be good organized:

React app code structure

It uses React hooks (yay!) and redux-toolkit =) (see the slices folder).

auth.ts, authentication slice using redux toolkit

2) Cloud Music - Repo

This is a clone of NetEase, a cloud music streaming service. The README is in Chinese but the code is in plain English.

GIF from README

This project uses redux (without redux-toolkit) and hooks. What I find interesting in this project is the code structure:

react-cloud music code structure

At first, it seems pretty standard but after reviewing the reducer (store/reducer.js) I noticed that they are "grouping" (inside application folder) some components and styles alongside the redux logic:

3) Todoist clone - Repo

Karl Hadwen did this Todoist clone, and he even has a video tutorial on Youtube.

Screenshot from README.me

For the "backend", he used Firebaseinstead of building an API from scratch. He used context and didn't use redux (yes, you don't always need to use redux).

4) Mortgage – Live | Repo

Mortgage is a mortgage overpayment calculator!

Screenshot from Live website

It uses D3 to draw the chart and hooks! It is a small app but it is a good start to learn how to use hooks in calculator-like applications.

5) Tomato Work – Live | Repo

Tomato-work is a personal affairs management system written in React using hooks and redux:

Live demo from README

For the UI, it uses Antd, which is pretty awesome BTW. The code structure is standard:

Code structure

What I find interesting is that it has a services folder (remind me of angular) where each file is an abstraction to make API calls. So instead of calling axios directly in the component, he uses a service function instead.

6) Write with me – Live | Repo

Write with me is a real-time collaborative markdown editor written in React with hooks and it uses AWS Amplify

As you can see, this is a small project:

Code structure

So, the code structure is not organized using different folders. All the state management is done using useReducer hooks.

There is a graphql folder because Amplify works with graphql

7) JIRA Clone – Live | Repo

This is a simplified JIRA Clone, looks awesome!

Screenshot from the live website

Analyzing the code structure, you can see it uses cypress and jest for testing:

Code structure

As the author says, it is a good example of a modern real-world React codebase. There are the features (from README):

The project features from README

8) Spectrum – Live | Repo

Spectrum is a platform that allows you to create and participate in awesome communities.

I have seen many people recommending this repository. And there is a good reason for this: the repository is their entire product!

"That being said, this codebase isn't your typical open source project because it's not a library or package with a limited scope—it's our entire product."

In my opinion, this is one of the best open source full-stack react projects that shows off how to properly structure a large codebase

Spectrum folder structure: Full-stack JavaScript in action

The frontend SPA (react) lives in src folder

SPA frontend folder structure

As you can infer from the folder structure, they split the code by "type" of code (components, reducers, hooks, etc).

9) GitHub profile README Generator – Live | Repo

This tool provides an easy way to create GitHub profile README with the latest add-ons like visitors count, GitHub stats etc.

This is an example of a Gatsby project that uses hooks. The files are organized by type which is fine for the size of the project:

If you haven't created your GitHub profile, maybe you can now by using this tool (I did!)

Did I miss a project?

It was a bit hard to find open-source projects using the latest react tools (e.g. hooks) 😓.

Reply in the comments if you think I miss a cool modern project 😊