A visual introduction to functional programming

Building photographed from a sideways angle
Building photographed from a sideways angle
Photo by Jackson Jost on Unsplash.

What’s Functional Programming?


What is modularity, and what metrics are available to measure modularity?

Diagram showing dependence on outside or external coupling.
Diagram showing dependence on outside or external coupling.
Dependence on outside or external coupling. Image by the author.

Introduction


Introduction

A day in the life of developers

Image for post
Image for post
Developers diaries. Image by the author.

Testimonials from code reviewers


What we will do ?

Project

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…


Image for post
Image for post
Image taken from : http://ravindranaik.com/pattern-matching-in-c-8/

Tuples

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
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


What I want to do ?

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


What we will do ?

  • actix as http server.
  • mongo db driver to dialog with mongo database.
  • postman to test our endpoints.
Image for post
Image for post
Technical staff

Project configuration

Create & init new project

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

Project structure


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

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 …


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
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
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
//dot env configuration
var dotenv = require('dotenv')
dotenv.config()

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


Stack & Heap

Stack & Heap

  • Primitive values such as numbers, characters, and true/false values are stored on the stack (stack is LIFO).
  • While the value of more complex objects or types that could grow in size are stored in the heap memory. …

About

Héla Ben Khalfallah

I love coding whatever the language and trying new programming tendencies. I have a special love to JS (ES6+), functional programming, clean code & tech-books.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store