DEV Community: David Morcillo

Practical React & Redux - Part 2

David Morcillo — Tue, 08 Dec 2020 13:24:08 +0000

Originally published at Codegram's blog

This is the second part of the React workshop series created by our team. Let's learn about how to create stateful components using React hooks.

It's been a while but finally awe have released the second part of our React workshop. Remember that you can download the code from the first part in here. If you want to follow along just checkout the part-1 tag and update the code as you read.

Introduction

In the first part we created our first components using React, but we ended the workshop in a bit of a cliffhanger and encountered a bug 🐛. Today we are going to continue our application and start writing some stateful components.

Stateful components with React hooks

We have created a bunch of stateless components or usually also called "dumb components". Starting now we are going to learn how to add some state to them. First we need to learn what is a React hook!

useWhat? First overview of hooks

A hook is just a function, period. We can write our hooks and the convention is that they start with the prefix use. The hooks can only be executed inside components (or other hooks) so usually the hook just return something that can be used by the component.

A common use of hooks is to reuse some business logic. First let's create a Cat 😸 component (you need to create the corresponding folder structure as we did before):

// src/cats/components/cat/Cat.js
import React from 'react'
import PropTypes from 'prop-types'

const Cat = ({ name, score }) => {
  const onClick = () => {
    score += 1
    console.log(`This is your new score: ${score}`)
  }

  return (
    <div>
      <p>{name}</p>
      <p>Score: {score}/10</p>
      <button onClick={onClick}>Increase score</button>
    </div>
  )
}

Cat.propTypes = {
  name: PropTypes.string.isRequired,
  score: PropTypes.number.isRequired,
}

export default Cat

Then, use the Cat component in our application to add a new cat to the view (😸 are also awesome so give them a good score!):

// src/App.js
import React from 'react'
import Dog from './dogs/components/dog/Dog'
import Cat from './cats/components/cat/Cat'

const App = () => {
  return (
    <>
      <Dog name="Boira" score={13} />
      <Dog name="Black" score={13} />
      <Cat name="Uhura" score={13} />
    </>
  )
}

export default App

Nothing really fancy here! Now we have two components that are mostly identical. Let's fix this!. Let's create a pets module with a hooks folder, and we are going to create our first hook. We are going to copy the onClick function from the Dog component and use it inside our hook.

// src/pets/hooks/useScore.js
const useScore = (score) => {
  return {
    increaseScore: () => {
      score += 1
      console.log(`This is your new score: ${score}`)
    },
  }
}

export default useScore

Notice that the hook is just a function that receives some value, score in this case, and returns a new object. I added the increaseScore function to the object so now we can use it inside our components.

Let's use it in the Dog component:

// src/dogs/components/dog/Dog.js
import React from 'react'
import PropTypes from 'prop-types'

import useScore from '../../../pets/hooks/useScore'

const Dog = ({ name, score }) => {
  const { increaseScore } = useScore(score)

  return (
    <div>
      <p>{name}</p>
      <p>Score: {score}/10</p>
      <button onClick={increaseScore}>Increase score</button>
    </div>
  )
}

Dog.propTypes = {
  name: PropTypes.string.isRequired,
  score: PropTypes.number.isRequired,
}

export default Dog

Do the same for the Cat component, and we are done here! We have moved some common logic to a hook so now we can focus on fixing our problem. We need to make our view aware of that change in the score or, in other words, make the component stateful!

Stateful components using useState

React already includes some hooks. We are going to use useState to add some state to our components. The difference between a prop and the state is that we can change the state to re-render our component when something changes!

Remember that we can use hooks inside other hooks so let's use the useState hook inside our custom hook useScore like this:

// src/pets/hooks/useScore.js
import { useState } from 'react'

const useScore = (baseScore) => {
  const [score, setScore] = useState(baseScore)

  return {
    score,
    increaseScore: () => {
      setScore(score + 1)
      console.log(`This is your new score: ${score}`)
    },
  }
}

export default useScore

Hold up! There is a lot to digest in the previous snippet so let's review it step by step. First, we rename the hook argument to baseScore and passed it to the useState method, this is the initial value of our state. The useState function returns an array where the first element is our state and the second element is a function to replace our state. I used the word "replace" intentionally because we need to provide a new object always, otherwise it will not be updated (embrace the immutability!).

Then I added the score to the object that our custom hook is returning, so we have access to it in our component. Finally, I used the setScore function to set a new state when the increaseScore function is called. Neat, right?

Let's see how to use it in our components. I am gonna change the Dog component, and I am gonna leave the Cat component for yourselves as an excercise:

// src/dogs/components/dog/Dog.js
import React from "react";
import PropTypes from "prop-types";

import useScore from "../../../pets/hooks/useScore";

const Dog = ({ name, initialScore }) => {
  const { score, increaseScore } = useScore(initialScore);

  return (
    <div>
      <p>{name}</p>
      <p>Score: {score}/10</p>
      <button onClick={increaseScore}>Increase score</button>
    </div>
  );
};

Dog.propTypes = {
  name: PropTypes.string.isRequired,
  **initialScore: PropTypes.number.isRequired,**
};

export default Dog;

I also changed the Dog's score prop to initialScoreso we need to update our application as well:

// src/App.js
import React from 'react'
import Dog from './dogs/components/dog/Dog'
import Cat from './cats/components/cat/Cat'

const App = () => {
  return (
    <>
      <Dog name="Boira" initialScore={13} />
      <Dog name="Black" initialScore={13} />
      <Cat name="Uhura" initialScore={13} />
    </>
  )
}

export default App

After making all the changes you can refresh your browser and test your application. The view is also updated when we press the button! 🎉

React includes a small list of hooks: https://reactjs.org/docs/hooks-reference.html but creating your own is straightforward.

Conclusion

In this article we learned about how to add state to our a React application and written our first React hooks. Our application is basic but for a bigger application is better to rely on a state management library and that's the topic for our next article!.

You can find the code examples in this repository. I also tagged the progress for part 2 in case you want to check the repository at this specific moment.

Cover photo by Henar Langa

First thoughts about Deno 🦕

David Morcillo — Wed, 20 May 2020 08:01:55 +0000

Originally published at Codegram's blog

You may have heard about Deno at some point, or maybe not, but the internet is on fire right now and for a good reason! A new JavaScript runtime is out on the street and it has a cute dinosaur as a logo (some people think is a sad sock but no...). We even tweeted a week before its first release but to be honest we heard about Deno two years ago after watching this awesome talk by Ryan Dahl.

In this article we are going to explore the surface of Deno and share our first thoughts about it. Let's roll!

Hello Deno!

Deno is a JavaScript runtime like Node. To use it, first you need to install the deno CLI using the instructions for your operating system in https://deno.land/ (kudos for such a great domain name!). Deno is not a fork of Node and it has been created from scratch using the Rust 🦀 programming language. I wrote an article about Rust for JS programmers so check it out if you want to know more about the language!

After installing the CLI you can run the classic "Hello, World!" program like this:

deno run https://deno.land/std/examples/welcome.ts

Are we running TypeScript out of the box? Yes! TS is a first citizen in Deno so you don't need any additional tool to run TS code. You can also run JS code, but I am such a TypeScript fan that I mentioned it first 😜.

Be aware that Node programs are not compatible with Deno. They are working on a compatibility layer right now so it will be possible in the future to use your favorite NPM packages.

Another thing to notice is Deno is sandboxed by default. That means you will not have access to the network or your file system by default. If your program needs access you need to allow it explicitly (i.e. use --allow-net for network privileges).

No more package.json nor node_modules

Who hasn't heard about this recurrent joke around the internet?

Well... even if it's a bit exaggerated, part of the message is true 😅. As your application grows, your dependency list grows with it and you end having a huge dependency tree in your system. The problem is each application has its copy of some package@version that you are using.

One of the main goals of Deno is to mirror how the browser works. When you want to import something in the browser you just add a <script> tag and use a URL. Deno works exactly like that:

import { assertEquals } from "https://deno.land/std/testing/asserts.ts";
assertEquals("hello", "hello");
assertEquals("world", "world");
console.log("Asserted! 🎉");

Ok, that looks a bit odd! Since there is no package.json we don't have a way to specify external dependencies, so we are just importing them when they are needed! The first time you run this program Deno will automatically download the file and will cache it. You need to specify the --reload flag if you want the package to be downloaded again.

You will probably have tons of questions regarding this topic (I had them too!) so I invite you to visit this FAQ page in the Deno manual if you want more info about this topic.

Runtime compatible with Browser APIs

Another main goal of Deno is to be Browser compatible so there are some features that are accessible in the global scope like fetch or addEventListener. You can even use the window global object (although I recommend using the standard [globalThis](https://github.com/tc39/proposal-global) for now). You can check the documentation to learn more about these global functions.

The runtime also includes the Deno global for APIs that are not web standard. You can use it for some low-level operations like reading a file, opening a TCP socket, etc.

Rich standard library

Deno maintainers also created a collection of standard modules ready to use. The library is also hosted in the deno.land domain so you can import any module in your application using the url like this:

import { v4 } from "https://deno.land/std/uuid/mod.ts";

console.log(v4.generate());

The sandard library includes many useful modules but there are many third-party ones also available and the list is growing every day! The good news is you can import any module hosted in any public URL so importing modules from GitHub is also possible! Deno has a URL rewriting service that you can use to make your modules available. Check this page to learn more about it.

Built-in tooling

The deno CLI also includes some built-in tooling to perform some common tasks like running tests, formatting code or even creating a bundle! Does it mean you can replace jest, prettier and webpack? Probably not! Deno is pretty new and it doesn't have a huge ecosystem right now but having all this tooling with just installing one binary is pretty impressive.

Conclusions

Come aboard to the hype train! I am really impressed with Deno, after two years of development and with a long road to travel the new JavaScript runtime looks great and I can't wait to start experimenting with it. Node was released about 11 years ago and it was a remarkable milestone in the JavaScript world. It made the language much better and I think we have reached a new milestone: it's Deno 🦕 time!

Cover photo by Blanca Paloma Sánchez

Practical React & Redux - Part 1

David Morcillo — Fri, 24 Apr 2020 13:00:15 +0000

Originally published at Codegram's blog

At Codegram we can spend 5 hours a week doing some learning stuff like reading books, doing an online course, or even crafting some pet project to try a new technology. It's really cool and sometimes we even share with our coworkers what are we doing in our biweekly Codegram's Talk Club™️. We want to make a step forward and we decided to create a new learning resource: introducing Codegram's Workshops™️!

Today we are gonna talk about React and Redux. In this first article of this workshop series we are gonna learn how to bootstrap a React application and create our first components. Stay tuned for future updates in this workshop series and let's start!

Introduction

This course is an introduction to React and Redux. We are gonna learn how to create a react application from scratch and deal with components and their weird JSX syntax.

This is not a complete React course and I want to focus on the basics and how to work with a store. I am not gonna cover some topics like styling your components or testing because these are broad topics that can be covered in future workshops. Even though we are gonna use Webpack I am not gonna cover any complex setup either. Let's begin!

Getting started

First of all we need a React application to start working on! There is a package called create-react-app that is very useful to bootstrap something. You can run this command:

$ npx create-react-app --use-npm practical-react-and-redux

By default the command uses yarn but I prefer npm. Let's move to that directory and start the development server:

$ cd practical-react-and-redux
$ npm start
Compiled successfully!

You can now view practical-react-and-redux in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.12:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

This will open your browser automatically to http://localhost:3000 and if you see the React logo spinning then the application has been compiled successfully and we are ready to start doing some stuff!

Spin up your favorite editor and move on 👏

Components are just functions

Let's start our journey creating our first component but, first of all, what's a component? In the React world a component is just a function that returns something that can be rendered in our DOM. Open the src/App.js file and remove everything.

Hello world components

We are gonna create our first component: the App component. Every React application has a root component and although you can name it whatever you want it is usually named App or Application (notice the CamelCase syntax). Write this in your src/App.js file:

// src/App.js
const App = () => {
  return 'Hello World!'
}

export default App

If you visit the http://localhost:3000 you will see our message. Congratulations you just write your first component! 🎉

You are not limited to just Strings and you can also write plain HTML in there. Try this:

// src/App.js
const App = () => {
  return <p>Hello world!</p>
}

export default App

Oh snap! Our application is not working anymore and we got a compilation error. What did you expect? Do you think that looks like JS? Of course not!

There is so magic ✨ behind of this. First of all we are not using plain JS anymore and we started using jsx. That's a language that compiles to JS and you can think about it as a hybrid between JS and XML (or just HTML).

In order to make that work we need to bring React to the party so let's import it!

// src/App.js
import React from 'react'

const App = () => {
  return <p>Hello world!</p>
}

export default App

You might be thinking: why I am importing the React constant if I am not using it? That's true! We are not using the React constant explicitly but when Webpack compiles this jsx it's using React.createElement under the hood to create our component so we need to bring that constant to make it work. If you are curious you can check the main.chunk.js source file in the browser.

A single component is really boring so let's create a few more components!

Components hierarchy and reusability

Time to create a Dog 🐶 component! As you may notice there is no folder structure to follow but I like to stick to some conventions. I like to organise my components per feature and also having each component in its own folder:

$ mkdir -p src/dogs/components/dog

In your editor create the Dog.js file in the new folder that we just created with the following content:

// src/dogs/components/dog/Dog.js
import React from 'react'

const Dog = () => {
  return (
    <div>
      <p>Boira</p>
      <p>Score: 13/10</p>
    </div>
  )
}

export default Dog

Now we can use this component in our App component like this:

// src/App.js
import React from 'react'
import Dog from './dogs/components/dog/Dog'

const App = () => {
  return (
    <>
      <Dog />
      <Dog />
    </>
  )
}

export default App

You might be wondering what's that ugly thing: <>. That's an empty tag and we need that for two reasons:

Every React component needs a single root element.
We don't want extra markup so the <> root element is not gonna render anything

Then we are just rendering two Dog components. As you can see a component can be used as a simple DOM element. We are enhancing the HTML language adding new tags!

Having two dogs named after my dog Boira is cool but it is cooler if we can change dynamically some things in our components. Enter the props!

Dynamic components using props

A prop or a property is a component's input data. Remember: components are just functions so props is just the single argument that our function is receiving. Since it is an Object we can use destructuring like this:

// src/dogs/components/dog/Dog.js
import React from 'react'

const Dog = ({ name, score }) => {
  return (
    <div>
      <p>{name}</p>
      <p>Score: {score}/10</p>
    </div>
  )
}

export default Dog

We added the two props: name and score. We are also using those variables inside our template escaping the value using curly braces {}.

If you refresh the page right now you are gonna see nameless dogs without score and that's very sad. You can think about props as a object that include all HTML attributes given to the DOM element representing your component. In other words, you can set the element of these props giving attributes to the <Dog> tag:

// src/App.js
import React from 'react'
import Dog from './dogs/components/dog/Dog'

const App = () => {
  return (
    <>
      <Dog name="Boira" score="13" />
      <Dog name="Black" score="13" />
    </>
  )
}

export default App

The application works and we have two different dogs now! There is one problem with our current implementation: we could forget to give a value to the score prop and a dog could end having a null score 😱.

Props validation: avoid bugs

React doesn't include a built-in package for props validation but there is a package called PropTypes that is included by default when we created the application. We can use this package to validate our props and ensure our components are used correctly:

// src/dogs/components/dog/Dog.js
import React from 'react'
import PropTypes from 'prop-types'

const Dog = ({ name, score }) => {
  return (
    <div>
      <p>{name}</p>
      <p>Score: {score}/10</p>
    </div>
  )
}

Dog.propTypes = {
  name: PropTypes.string.isRequired,
  score: PropTypes.number.isRequired
}

export default Dog

If you reload the app the application, it is working but we have an error in our console 🤔. We just found a bug! 🐛. In the previous snippet we added prop validations and marked both props as required. We also marked our score as a number but we are giving it as a string right now. Let's fix this:

// src/App.js
import React from 'react'
import Dog from './dogs/components/dog/Dog'

const App = () => {
  return (
    <>
      <Dog name="Boira" score={13} />
      <Dog name="Black" score={13} />
    </>
  )
}

export default App

The change might be a bit subtle: we replaced "13" with {13}. Since we are using curly braces again we are evaluating that 13 as a Javascript numberand the error is gone!

Event handlers as props

New requirements: we want to add a button to increase that score (we are not gonna add a button to decrease it because dogs are awesome). We need to listen to the click DOM event for a button and lucky for us React supports a onClick prop. Let's see how this works!

// src/dogs/components/dog/Dog.js
import React from 'react'
import PropTypes from 'prop-types'

const Dog = ({ name, score }) => {
  const onClick = () => {
    score += 1
    console.log(`This is your new score: ${score}`)
  }

  return (
    <div>
      <p>{name}</p>
      <p>Score: {score}/10</p>
      <button onClick={onClick}>Increase score</button>
    </div>
  )
}

Dog.propTypes = {
  name: PropTypes.string.isRequired,
  score: PropTypes.number.isRequired
}

export default Dog

Don't click the button yet! Let's check the code first. We added a new button element to the template and added the onClick prop. That prop needs to be assigned to a callback function that will be called when the user presses the button. I added a new function called onClick (naming is hard sorry) and I am increasing the score prop and logging a message.

If you visit the page and click the button you will see the message prompted in your console with the new score value. Yeah you did it! Oh...wait. The template is not being updated, we have another bug! 🐛

Not really 😅, props are supposed to be read-only and our Dog component is stateless. We need to make our component stateful to be able to change that score!

Just a quick warning ❗️: When a component's prop changes the component is automatically re-rendered but in our case we are not really changing the prop so the view is not updated.

Conclusion

In this article we learned about how to create a React application from scratch and added our first components. In the next article we are gonna learn about stateful components using React hooks and also we are gonna do our first steps with Redux.

You can find the code examples in this repository. I also tagged the progress for part 1 in case you want to check the repository at this specific moment.

Cover photo by Lachlan Donald

🦀 Rust for JS developers

David Morcillo — Tue, 15 Oct 2019 09:27:59 +0000

Originally published at Codegram's blog

The first time I read about Rust 🦀 it didn't pique my interest. Around two years ago, I was working as a web developer, mostly using JavaScript and I thought Rust wasn't for me because it looked really difficult at that moment.

At the start of this year, I decided to start learning Rust on my own. What has changed during this time? I am still a web developer but knowing that I will be able to write a program in Rust, compile to WebAssembly and execute it in the browser has been the spark that ignited my motivation.

In this post, I am gonna present Rust from a JavaScript developer perspective doing some side-to-side comparisons. I hope it will motivate you to give it a try!

What is Rust?

The Rust programming language was created by Mozilla and its first stable version was released around 2015. It looks like this:

fn main() {
    println!("Hello, World!");
}

It doesn't look so scary, right? You could say it almost looks like JavaScript but that's just the hello world program and it's a bit more complicated! Before looking at some features of the language let's place Rust in the programming languages spectrum like this:

There is a clear distinction between programming languages:

Low-level: Languages like C++ that has access to memory management are considered low level and they are very fast. They are also very insecure because it's very easy to mess up with memory and bad things can happen!
High-level: On the other hand, languages like JavaScript don't have that granular access to memory (there is the Garbage Collector that handles everything for us) and are considered safe languages so sometimes they can be slow.

Rust can be considered both fast and safe but it doesn't come for free: there is a steep learning curve and the compilation time can be a bit high even for small examples.

Rust key features

Like any programming language, there is a lot to cover but I decided to focus on four topics that are essential to learn the language and start working on it.

Types

JavaScript is a dynamically typed language, and we can do some fun things like subtracting the number 1 to the string wat and obtain unexpected results. This is possible because the type system is not strict. In Rust, if you try to perform a simple addition of two numbers that are not of the same type you get a compilation error:

fn main() {
    let a: i32 = 42;
    let b: f64  1.0;
    println!("{}", a + b); // ERROR: a and b are not of the same type.
}

You will get a lot of errors when you start working in Rust and you will probably hate the compiler at first:

If you feel like this dog and you are constantly fighting the Rust compiler don't worry! We all have been there.

Immutability

Functional languages are very well-known for working with immutable structures. As JavaScript developers, we are not forced to work with immutability but popular libraries like Redux and Immutable.js taught us these good practices. Today we have the let and const keywords to declare mutable and immutable variables respectively.

In Rust, we are gonna use just let to declare variables, and they will be immutable by default. If we want to use mutable data we need to add the mut keyword to the declaration like this:

fn main() {
    let a = 42;
    let mut b = 1;

    a = 43; // ERROR: a is not mutable
    b = 2;
}

Ownership

In my opinion, this is the hardest concept to learn Rust because it is really different from other languages that I worked on but this is the key that makes Rust fast and safe to use!

When you assign some data to a variable it is said that the variable owns it and every piece of data can only have one owner. Let's see this in action:

fn main() {
    let x = String::from("hello"); // x owns the "hello" string
    let a = x; // At this point a owns the "hello" string and x is no longer valid
    do_something(x); // ERROR: x cannot be used anymore!
}

In Rust there is no null and undefined values, so we cannot use a variable that doesn't have a value. In the previous example when we assigned a to x we are moving the value from x to a so at this point x doesn't have a valid value. The same happens with functions:

fn main() {
    let x = String::from("hello");
    do_something(x);
    do_other_thing(x); // ERROR: x cannot be used anymore!
}

fn do_something(s: String) {
    // Do something with s
}

When we call the method do_something we are moving the value from x to s, the argument received by the function. After executing the function we return to main and x doesn't have a valid value anymore.

The previous behavior is not always desired and that's the reason that in Rust we can borrow things! If you don't want to move a value from a variable to another one use references like this:

fn main() {
    let x = String::from("hello");
    do_something(&x);
    do_other_thing(&x); // This is ok now because we are not moving the value
}

fn do_something(s: &String) {
    // Do something with s
}

When we are dealing with ownership and borrowing the Rust compiler wants us to play nice so it will warn us if you we try to do something wrong:

If you are confused after learning about ownership and borrowing it is ok! Your brain has started to deal with memory management and it can hurt sometimes. I recommend you watching this video to learn more about this topic.

Structs

Rust is not an object-oriented language but it has some features that can emulate some behavior present in that kind of languages. When we work with classes in JavaScript we are dealing with both data and methods in the same place. In Rust, we are gonna separate the data representation from the methods that manipulate it like this:

struct Dog {
    name: String,
    score: i32
}

impl Dog {
    fn say_something(self: &Dog) {
        println!("Hey, my name is {}... I mean WOOF!", self.name);
    }
}

fn main() {
    let dog = Dog { name: String::from("Boira"), score: 13 };
    dog.say_something();
}

The struct Dog looks pretty similar to a JavaScript object but it's not. The struct is the shape of some data that will have two named fields: name and score. Below the struct you can see an implementation block (impl for short). We can declare methods that will manipulate the data like this and notice that if we want to associate the function with that data we need to pass self as the first argument. It kinda looks like Python, doesn't it?

If we omit the self value we are declaring a method that is not associated with any particular piece of data. You can think of it as a static method in a JavaScript class.

What can I do with Rust?

The first thing you need to do is install Rust and it cannot be easier. Visit the https://rustup.rs/ web to download the official toolchain installer. It is kinda similar to the nvm project that is commonly used with JavaScript.

Then you are gonna need some libraries so don't start from scratch. In the same way as we have Node packages in JavaScript we are gonna deal with crates in Rust. Visit crates.io, the official crates registry, to know more about Rust crates.

Since Rust is very versatile there are a lot of topics where Rust can be used and the community has made a good effort to track them in different websites:

www.arewewebyet.org: Even if there are no frameworks as mature as Ruby on Rails you could build some stuff! I recommend taking a look at the Rocket framework if you want to do some web development. You can even create GraphQL APIs using Juniper!
www.arewegameyet.com: Having full control of memory management is a necessary feature to create some kind of games so Rust is a wonderful candidate! If you are interested in game development I recommend you checking the Amethyst game engine.
www.arewelearningyet.com: Another topic that is widely popular right now is machine learning. The Rust ecosystem isn't very complete right now and it may not be as good as Python right now to do machine learning but If you are interested in the topic check their website!

Finally, if you are doing web development you are lucky! You can create programs, compile them and use it all together with your existing JavaScript code. The technology that made this possible is WebAssembly and it can be used right now in all modern browsers.

If you want to try it I recommend you to read the official Rust and WebAssembly book.

Conclusion

Rust is a really cool language to learn and you could build a lot of things with it! If you are a web developer like me you will find the whole WebAssembly topic very interesting and I hope I can write future posts about it.

If you want to start working with Rust I recommend you checking the official book and try to write some existing JavaScript programs with Rust. As a lot of things practice is the key!

Finally, this blog post was inspired by a talk that I presented in the JS Coders meetup event and you can check the slides here.

Cover photo by Phil Hearing

From a pet server to a Kubernetes cluster

David Morcillo — Tue, 20 Aug 2019 12:27:14 +0000

Originally published at Codegram's blog

Introduction

Today I am here to tell you a story about how we migrated our infrastructure and deployment strategy: from being worried all the time to rollout new versions with confidence.

At Codegram, we developed a product called Empresaula. It is a business simulation platform for students (you can read more about it here), and we cannot afford downtimes because it makes classes very difficult to follow for both teachers and students.

In the following schema, you can see the before/after picture of our simplified infrastructure:

We started with a single server called production-server. People usually use other cool names like john-snow or minas-tirith, but we kept it simple. Our database was in another server with automatic backups, so we felt safe until our beloved server was unreachable, and we needed to act fast. That day our office looked like this:

Nowadays, we use Kubernetes, and we have a real sense of safety. The idea of Kubernetes is to avoid feeling attached to any server (you don't name it), you describe your desired system instead. Kubernetes will monitor your system, and if at any point something is wrong, it will try to recover it. Kubernetes handles everything for us so, if everything goes down, we can relax like this:

Before explaining how Kubernetes works, we need to talk about the underlying technology: containers.

Docker: containers everywhere

A container is just a portable application. The most used containerization technology is Docker, and it is the default when you are using Kubernetes. A container is usually compared with virtual machines, but they are very different:

A hypervisor manages virtual machines, and every virtual machine it needs to emulate everything: an operating system, memory, CPU, etc. A container needs a container runtime (i.e., Docker) and is executed in the host operating system. When you have containerized your application, you can run it in any server with the Docker engine installed.

To run your application in Docker you need to write a Dockerfile. In the following snippet, you can see an example to create a container for a Rust application:

# Use the rust base image
FROM rust:latest as cargo-build

# Install dependencies
RUN apt-get update && apt-get install musl-tools -y

# Add another Rust compilation target
RUN rustup target add x86_64-unknown-linux-musl

# Install cargo dependencies
WORKDIR /usr/src/backend
COPY Cargo.toml Cargo.toml
RUN mkdir src/
RUN echo "fn main() {println!(\"if you see this, the build broke\")}" > src/main.rs
RUN RUSTFLAGS=-Clinker=musl-gcc cargo build --release --target=x86_64-unknown-linux-musl
RUN rm -f target/x86_64-unknown-linux-musl/release/deps/backend*

# Compile the Rust application
COPY . .
RUN RUSTFLAGS=-Clinker=musl-gcc cargo build --release --target=x86_64-unknown-linux-musl

# Use the alpine base image
FROM alpine:latest

# Copy the generated binary
COPY --from=cargo-build /usr/src/backend/target/x86_64-unknown-linux-musl/release/backend /usr/local/bin/backend

# Run the application
CMD ["backend"]

The Dockerfile is like a recipe of how your application is built and executed. You create a Docker image using that recipe to run the container wherever you want.

Managing containers manually could be cumbersome, so we need something to orchestrate them: let's see how Kubernetes can help with this.

A brief introduction to Kubernetes

Kubernetes is very well defined in their website:

Kubernetes is an open-source system for automating deployment, scaling, and management of containerized applications

In other words, Kubernetes is a container orchestrator that given the desired state, it will schedule the needed tasks to reach that state.

To understand how Kubernetes works, we need to know the smallest unit of scheduling: the pod. In the following schema, you can see different kinds of pods:

The most straightforward type of pod is a 1-to-1 mapping of a container. In some cases, if you have two containers with a tied connection, you can consider having them in the same pod (i.e., a backend application and a message logging system). You can also include Docker volumes inside a pod but be aware that a pod could be moved to another server inside the Kubernetes cluster at any moment.

Kubernetes has a lot of abstractions over pods like the Deployment. A Deployment describes how many replicas of the same pod do you want in your system and when you change anything, it automatically rollouts a new version. In the following snippet, you can see the manifest file (i.e., my-backend.deployment.yaml) of a Deployment object:

apiVersion: 'apps/v1'
kind: 'Deployment'
metadata:
  name: 'k8s-demo-backend'
spec:
  replicas: 2
  selector:
    matchLabels:
      app: 'backend'
  template:
    metadata:
      labels:
        app: 'backend'
    spec:
      containers:
        - name: 'backend'
          image: 'k8s-demo-backend'
          imagePullPolicy: 'Never'
          ports:
            - containerPort: 8000

Here I'm specifying that my system should have two replicas of a pod running the k8s-demo-backend Docker image. If I want to rollout a new version, I need to change the previous file (i.e., changing the docker image to k8s-demo-backend:v2).

If at some point one of our servers in the cluster goes down and Kubernetes detects that we don't have these two replicas running it will schedule a new pod deployment (even deploy a new server to allocate the pod if needed).

We cannot access a pod from the outside by default because they are connected to a private network inside the cluster. If you need access from the outside you need to add a Service. The Service is another abstraction that describes how to connect from the outside to a pod (or a group of pods). In the following snippet (i.e., my-backend.service.yaml) you can see an example of a Service:

apiVersion: 'v1'
kind: 'Service'
metadata:
  name: 'k8s-demo-backend-service'
spec:
  type: 'LoadBalancer'
  selector:
    app: 'backend'
  ports:
    - port: 8000
      targetPort: 8000

This Service describes a LoadBalancer that will give access from the outside to the group of pods that match the selector app=backend. Any user accessing the cluster using the port 8000 will be redirected to the same port in a pod described in the previous Deployment. The Service represents an abstraction, and it will behave differently depending on our cluster (i.e., if the cluster is running in the Google Kubernetes Engine it will create a Layer 4 Load balancer to the server pool in our cluster).

Demo time!

I have created a repository with a small example of a system that can be deployed in a Kubernetes cluster. You can run a local cluster using minikube, or if you are using Docker for mac you can run a local cluster enabling it in the settings.

Assuming you have your cluster created and you have cloned the repository you need to build the Docker images first:

$ docker build -t k8s-demo-frontend frontend
$ docker build -t k8s-demo-frontend backend

Then you can open a new terminal and run the following command to run every second the Kubernetes CLI command to list the pods, Services, and Deployments in our cluster.

$ watch -n 1 kubectl get pod,svc,deploy

In the repository there a few manifest files that can be applied to the cluster with the following command:

$ kubectl apply -f .

In the other terminal, you should be able to see the list of resources created by Kubernetes. Since we have created a LoadBalancer, we should have an EXTERNAL-IP in the services list to access our application. If you are running the cluster in your local machine, you can visit the application in http://localhost:8080. If everything works correctly, you should be able to see a small Vue application that can submit a form to a Rust server and prompts a message.

If you want to keep playing with the demo, try to change the number of replicas and apply the manifest files again.

Final notes

The transition from the pet server to the Kubernetes wasn't as smooth as described in this article, but it was worth it. We learned a lot during the process and now we are never afraid to rollout new versions of our application. We stopped being worried about our infrastructure and Kubernetes simplified our lives in so many levels so we can just focus on delivering value to the final user. Also we can relax like this cat:

Here you can see a list of useful resources if you want to go deeper into the topic:

Shameless plug

This post was heavily inspired by a lightning talk that I delivered in the meetup group Full Stack Vallès.

Do you also want a rock-solid infrastructure and not worry about scaling your servers? Throw us a line at hello@codegram.com and we'll be glad to help you!