
The recent launch of _[deno](https://deno.land/)_ has made a big impact in the javascript/typescript community. This is a real alternative to _node.js_. However I consider this technology in an adopting phase. Developers are exploring it, generating content, developing small projects so it will take some time until we see production software built with _deno_.

I have been reading the basis about _deno_ and, as you can imagin, the best way for learning a technology is coding. If you are interested in giving a chance to deno, I will show you a super easy way for doing it, without installing any extra package on your laptop.

## What I want to do

I want to create a small and simple API using _deno_ for mananing a collection of movies. In addition, I want to do that within a docker container so I don't need to install deno in my system.

Also, I want to use _docker-compose_ for containers management in the development process.

After that I want to have a simple API running with some endpoints avaiable and everything running inside a docker container.

## Dockerfile

When I am testing a new technology I like to get started fast, I usually feel a bit upset when I need to spend more time for configuring an environment and downloading packages than for coding using the technology itself. So that's why I have spent a bit of time for building a custom _Dockerfile_ for my first deno application, so anyone can run it quickly.

Here I define the content of our _Dockerfile_:

```docker
FROM frolvlad/alpine-glibc:alpine-3.11_glibc-2.31

ENV DENO_VERSION=1.2.0

RUN apk add --virtual .download --no-cache curl \
&& curl -fsSL https://github.com/denoland/deno/releases/download/v${DENO_VERSION}/deno-x86_64-unknown-linux-gnu.zip \
--output deno.zip \
&& unzip deno.zip \
&& rm deno.zip \
&& chmod 777 deno \
&& mv deno /bin/deno \
&& apk del .download

ENV PROJECT_DIR /home/app

RUN mkdir $PROJECT_DIR

WORKDIR $PROJECT_DIR

COPY src/ $PROJECT_DIR/src

EXPOSE 3000

CMD [ "deno", "run", "--allow-net", "src/server.ts" ]
```

What we do here is downloading _deno_ and installing it, making the executable available in our system. Then we will move our code inside de docker image and then we will be ready for runing our _deno_ server. Have a look at `--allow-net` flag, we will need to use it for accessing to the network. By default the access to the network is restricted.

## Creating a deno server using Oak

I want to use a router middleware for building my API, so I want to get some kind of equivalent to _express_ for _node.js_.

In _deno_, I have seen some alternatives but here I have choosen [oak](https://oakserver.github.io/oak/), which is a middleware framework for _deno_ which provide a router middleware for our server.

So here is the code for our server:

```js
import { Application } from 'https://deno.land/x/oak/mod.ts';
import router from './router.ts';

const app = new Application();

app.use(router.routes());
app.use(router.allowedMethods());

await app.listen({ port: 3000 });
```

With these few lines, we will have our server running on port 3000.

I have defined my routes in a separate file and then added it to _deno_ app.

Now we will dive in step by step in all the pieces involved here. For all the next sections I will show just some fragments of the code for avoiding make this post hard to read, I will provide a link with all the code at the end of the post.

## Routing

_Oak_ provide us a router wich han handle all of our routes and setting the controllers for each of them.

```js
import { Router } from 'https://deno.land/x/oak/mod.ts';

import { getInfo } from './controllers/info.controller.ts';
import { getMovies, getMovie, addMovie, updateMovie, deleteMovie } from './controllers/movie.controller.ts';

const router = new Router();

router
  .get('/', getInfo)
  .get('/api/movie', getMovies)
  .get('/api/movie/:id', getMovie)
  .post('/api/movie', addMovie)
  .put('/api/movie/:id', updateMovie)
  .delete('/api/movie/:id', deleteMovie);

export default router;
```

## Controllers

Controllers are the callbacks we want to execute when a route is accesed in our API.

Here is one example:

```js
import { Request, Response } from 'https://deno.land/x/oak/mod.ts';

export const getMovies = ({ response }: { response: Response }) => {
  const data = getList();
  response.body = {
    success: true,
    data,
  };
};
```

Controllers receive one parameter of type `Context` and within it you can acces to `request`, `response`, `params`... This is quite interesing so we can use destructuring for just use the parameters that we are going to need, good point here for something that we can't do using _express_.

For more information about these concepts, you can find all the information [here](https://deno.land/x/oak/README.md).

## docker-compose

Finally, I have also defined a docker-compose file for a quick set up of my API.

This will create a container with the image we defined before and my API will be ready for using.

```yml
version: '3.6'
services:
  api:
    build:
      dockerfile: ./Dockerfile
      context: .
    ports:
      - '3000:3000'
    volumes:
      - .:/home/app
```

## Conclusion

I have enjoyed using this new technology for building backend software using typescript. I see some nice features that are great and now the only thing we can do is waiting and see which is the evolution of _deno_,. The javascript ecosystem grows quite fast and it is really difficult to stay there for years, there are plenty of tools that haven't could stay on.

Results from stateofjs, stackOverflow and the _deno_ community growth will show us the real impact of this technology that currently is so fashion and all developers want to give it a try.

## Source code

You can find all the code I have used [here](https://github.com/fjfdev/deno-api-docker). Feel free to clone it and play &#x1F600;


Setting up a Deno API with Oak using Docker


Images have become the new way for comunication, we manage tons of them everyday in the social media, in the news, in our mobile applications...

Images are everywhere so, when we develop a piece of sotware that has to deal with images, specially a web application, we have to pay attention about how are we managing those images.

In this post I am going to give you 4 quick tips regarding image optimization that can make a significant impact on the performance of your web application.

## Image compression

As you probably guess, this is about reducing image size. Sometimes we use third party images, and we don't take care about sizes. I would say that the size of images is usually larger than we need.

There are plenty of tools for that purpose, in my case I recommend [imagemin](https://www.npmjs.com/package/imagemin), in its cli version [imagemin-cli](https://www.npmjs.com/package/imagemin-cli)

It is super easy to use and I have experienced how it reduces image size without a remarkable losing of quality.

## Using _srcset_ and _sizes_ attributes

Using these two new attributes we can make our images responsive so they can behave differently for different screen sizes.

With `srcset` we set which images are available for being picked up by the browser depending on the current screen resolution.

As you can see, every entry within `srcset` is a combination of:

- Image path
- A space
- Image real size expressed in _w_, not in _px_.

By using `sizes`, we set the media conditions that will match with each of the conditons defined previously on `srcset`.

So, if we define our image in the following way:

```html
<img srcset="fjfdev-small.jpg 480x, fjfdev-medium.jpg 800x" sizes="(max-width: 500px) 480px, 800px" alt="fjfdev testing image" />
```

It means that:

- The browser can choose between _fjfedev-small.jpg_ and _fjfedev-medium.jpg_ according to the conditions we have in **sizes**.
- When _(max-width: 500px)_ is triggered, we tell the browser that the best image width to chose is 480px, if not, we tell the browser that **800px** will be the better option.

So when the browser comes to our page and sees that `<img>` tag, it evaluates the first true media condition set in sizes, then, it looks the slot where the image is going to be displayed and it puts there the image that has the same size.

If there is not an image with that size, the browser will pick a bigger one among the ones we have defined.

## Use a external CDN

Maybe this is not a solution for small or medium web applications, but if your application is dealing with hundreds of images maybe you should consider to use a _CDN (Content Delivery Network)_ because the difference will be more measurable.

Using a CDN can provide you a full set of tools for managing your images. Not just a solution for storage but a way for manipulating them, so you can transform your images into different sizes, convert them into new formats and even more (those features could be different depeding on the CDN provider).

And the most important thing, the CDN will take care for serving your images as fast as possible, taking into account the region where the request comes from so the image can be delivered from the server with the best location.

## Check new image formats for the web

There are a couple of new image formats ([JPEG 2000](https://jpeg.org/jpeg2000/index.html), [JPEG XR](https://jpeg.org/jpegxr), or [WebP](https://developers.google.com/speed/webp/?hl=en-EN)) which can provide a better compresion that the common JPG or PNG that are usually used.

This is specially relevant in mobile devices, where loading images faster means less cellular data consumed.

If you want to learn more about these new image formats, bear in mind compatibiliy, not all of them are cross browser compatible so you might need to load images in different formats depending on the browser used.

## Recap

Here I have shown you 4 tips for optimizing images and getting a better performance that have helped me in different projects.

Depending of the project, you might need to put attention to all of them or maybe to just a few. I hope you have found it interesting and useful for your projects. &#x1F600;


Posts 📝

Setting up a Deno API with Oak using Docker

4 ways to optimize your images for improving web performance