Introduction

In this article, I’ll talk about modularity: What is modularity? Why is it important? And how can we measure modularity?

Modularity consists of dividing a system into separate and independent parts called groups or modules.

Design and code for the future

Introduction

A day in the life of developers

Testimonials from code reviewers

What we will do ?

Project

We will try to make an Online Bookstore.

Possible use cases

• get all books
• get a book details
• get all categories
• get all authors
• get books by category
• get books by author
• search a book by its name or author
• add a review : comment and rating
• update a review : comment and rating
• user can order one or many books

Constraints

• a book can have only one author
• a book can be associated only one category
• a book can have zero to many reviews
• an order can contains the same book only once time but with quantity from one to max
• user can make a purchase that contains from one to many books…

In this story, we will see together the different aspects of Elixir Pattern Matching: tuples, list, map and multiclause function.

Tuples

Let’s assume that we have a function that return the gps coordinates (latitude, longitude) for a given country : get_gps_coordinates.

defmodule ElixirPatternMatching.Examples do
  def get_gps_coordinates(country) do
    %{
      France: {46.71109, 1.7191036},
      Spain: {40.2085, -3.713},
      Italy: {41.29246, 12.5736108}
    }[country]
  end
end

This function return a Tuple : { latitude, longitude }.

Let’s call this function to get the gps coordinates for ‘France’ :

defmodule ElixirPatternMatching do
  import ElixirPatternMatching.Examples,
    only: [get_gps_coordinates: 1]

  {latitude, longitude} = get_gps_coordinates(:France)

  IO.inspect("latitude :  #{latitude}")
  IO.inspect("longitude : #{longitude}")
end

We have destructured tuple elements to individual variables : latitude and longitude (respecting the order). …

WASM (WebAssembly) or not in frontend projects ?

What I want to do ?

I’m trying to find approach to enhance the performance of my frontend projects.

My frontend projects are mostly websites for many and different purposes.

I have always complex logic to do like filtering and transforming big backend response in frontend side. Sometimes I must use the generic Rest response and I can’t use graphql nor adding a BFF.

I add these complexities :

• complex UI/UX rules.
• supporting multiple browsers.
• 3G, 4G, …
• responsiveness and good user experience.

How can my frontend handle these complexities and keep running !

Some technics that I use to enhance my frontend…

What we will do ?

In this story, we will see together how to make a Rust Rest API using :

• actix as http server.
• mongo db driver to dialog with mongo database.
• postman to test our endpoints.

Project configuration

Create & init new project

cargo new rust-rest-api
cd rust-rest-api
cargo init

Project structure

React JS, Apollo Graphql Client

Last time we had seen together how to do a Nodejs graphql server using Apollo :

We continue our trip inside graphql and this time we will focus on client.

We will use :

• React JS
• Apollo Graphql Client (hooks version)
• ant design to have beautiful UI

Project init

Create project

npx create-react-app react-graphql-clientnpm install apollo-boost @apollo/react-hooks graphqlnpm install antd

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './index.css';
import 'antd/dist/antd.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA …

NodeJS, Apollo Graphql Server, Mongoose, Mongo DB

Project setup

Init project

mkdir node-graphql-apicd node-graphql-apinpm init --yesnpm install mongoosenpm install apollo-server graphqlnpm install nodemon dotenv @babel/core @babel/node @babel/plugin-transform-async-to-generator @babel/plugin-transform-runtime @babel/preset-env --save-dev

package.json

"start": "nodemon --exec babel-node index.js",

Babel Config

touch babel.config.js

babel.config.js :

module.exports = function (api) {
    api.cache(true);

    const presets = [
        "@babel/preset-env"
    ];
    const plugins = [
        "@babel/plugin-transform-async-to-generator",
        "@babel/plugin-transform-regenerator",
        ["@babel/plugin-transform-runtime", {
        "helpers": true,
        "regenerator": true
        }]
    ];
    return {
        presets,
        plugins
    };
}

dotenv (.env)

touch .env

.env :

DEFAULT_LANGUAGE = en
GRAPHQL_APP_PORT = 5000
GRAPHQL_APP_PATH = /graphql

MONGOOSE_DB_HOST = 127.0.0.1
MONGOOSE_DB_PORT = 27017
MONGOOSE_DB_NAME =  local

index.js

touch index.js

index.js

//dot env configuration
var dotenv = require('dotenv')
dotenv.config()

//launch server after loading env var
require('./server/server.js') …