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.



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 ?


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


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

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


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}
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}")

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


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…

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


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

Babel Config

touch babel.config.js
module.exports = function (api) {

const presets = [
const plugins = [
["@babel/plugin-transform-runtime", {
"helpers": true,
"regenerator": true
return {

dotenv (.env)

touch .env



touch index.js
//dot env configuration…

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…

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