DEV Community: Chan Ho Ahn

Similar functions in JavaScript and Python

Chan Ho Ahn — Sun, 25 Nov 2018 16:00:10 +0000

There are some similarities between computer languages. The two most popular computer languages in these days are probably JavaScript and Python. I have looked in a few useful features between languages. The first three functions I have compared here are basically serving the same purpose with very similar syntax between JavaScript and Python. The purpose of this blog is to show how similar between two languages beyond basic syntax.

First one is Arrow function from JavaScript and Lambda from Python.

Lambda in Python, Arrow function in JavaScript

First, in JavaScript,
We can change this simple function to arrow function in JavaScript. I won't mention about "this" binding with arrow function here but just talk about simplicity of arrow function.

//JavaScript function
 function funcName(param) {
  return param + 10;
}

//JavaScript arrow function
const funcName = (param) => param + 2

Both JavaScript arrow function and Python lambda can be used as a function by assigning function name, or it can just be used as an anonymous function. An anonymous function means the function doesn't have its name assigned which is typically for one time use with serving simple purpose inside another function call. Arrow function in JavaScript serves more than its simplicity such as lexical "this" binding.

#Python function 
 def func_name(param):
      return param + 10

#Python lambda
func_name = lambda param: param + 10

Map function

Map function between JavaScript and Python are almost identical. In JavaScript, forEach function does similar job but it is not used in some cases. map function is used instead where we need to create a new copy of object in a different memory location after map function call. In Python, map function works the same way as not corrupting the original copy in memory but creating a new one to reconstruct new one.

Looking at the following example, "nums" is original copy, and "doubles" is new copy. We don’t corrupt "nums" after running map function.

Map vs. Map
In Python:

 nums = [ 1, 2, 3, 4, 5 ] 
 def double(x):
     return x * 2

 doubles = map(double, nums)

You can use Python lambda here to simplify it. Just one line of code…. Awesome!

 doubles = list(map(lambda x: x * 2, nums))

 #Result:
  [ 2, 4, 6, 8, 10 ]

In JavaScript:
We can also apply arrow function here to simplify it. In JavaScript, Map function is widely used in React.js as for the same reason that "nums" in the following won't be modified after running map function.

  const nums  = [1, 2, 3, 4, 5]
  const doubles = nums.map( x => x * 2);
  console.log(doubles)

  //Result:
  [2, 4, 6, 8, 10]

Filter function

Filer function between JavaScript and Python is similar as what we have seen from map function. The same rule applies here that we don't corrupt the original copy but reconstruct a new one after running filter function.

In Python:
Let's try to take even numbers out from given list.

 nums = [1,2,3,4,5,6]
 evens = list(filter(lambda x : x % 2 == 0, nums))

 #Result:
 [2, 4, 6]

In JavaScript:

 const nums = [1,2,3,4,5,6]
 const evens = nums.filter( x => x % 2 == 0 )
 console.log(evens)

 //Result: 
 [2,4,6]

Conclusion

Learning Python after JavaScript, or learning JavaScript after Python would be a lot of fun. It is like learning another foreign language but the new one you try to learn is already very similar to the one you already can read and write. Both languages are fantastic and its popularity is undeniable in modern computer programming languages.

Axios in React.Js

Chan Ho Ahn — Tue, 13 Nov 2018 19:12:20 +0000

Axios is one of the most downloaded NPM package even though React.JS comes with its native FETCH API which supposedly does the same job as Axios does. I would not explain why Axios is more popular than FETCH or other APIs in both React.jS and Angular. This article is mostly about using Axios in React.JS which I have learned from Mosh Hamedani's training (https://programmingwithmosh.com).

The following is to help code CRUD method in React.js. It may be useful as a quick reference how to make it work with the backend Node.JS.

The following is full snapshot of the code structure except "render" part is omitted. The scope of this article is Axios and Node.JS CRUD implementation. "onClick" event for each handlers should be straightforward.

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';
const apiEndpoint = 'URL here';
class App extends Component {
    state = {
    posts: []
};

async componentDidMount() {
    const { data: posts } = await axios.get(apiEndpoint);
    this.setState({ posts });
}

handleAdd = async () => {
    const obj = { title: 'a', body: 'b' };
    const { data: post } = await axios.post(apiEndpoint, obj);
    const posts = [post, ...this.state.posts];
    this.setState({ posts });
};

handleUpdate = async post => {
    post.title = 'updated title';
    const { data } = await axios.put(apiEndpoint + '/' + post.id, post);
    // axios.patch(apiEndpoint + '/' + post.id, {title: post.title});
    const posts = [...this.state.posts];
    const index = posts.indexOf(post);
    posts[index] = post;
    this.setState({ posts });
};

handleDelete = async post => {
    await axios.delete(apiEndpoint + '/' + post.id);
    const posts = this.state.posts.filter(p => p.id !== post.id);
    this.setState({ posts });
};

Let's go over CRUD methods one by one.

GET Method : ComponentDidMount lifecycle hook is the most reasonable place to implement GET method. When the browser is ready with all components are ready, we can bring data from the backend side.

Axios returns "data" array in promise return. We can simply extract "data" from "Promise" return from Axios. Then, "data" is renamed to "posts" to simplify the code further. If {posts: posts} are the same value with 'posts' and 'post', we can simplify it to {posts} in ES6 JS.

async componentDidMount() {
    const { data: posts } = await axios.get(apiEndpoint);
    this.setState({ posts });
}

POST method is to add single object to the backend database. Assume that there are "title" and "body" properties in the data schema, then we want to add new object with {title:'a', body:'b'}.

In POST method, Axios returns the same return property of 'data' through Promise, but it is a single object which was just added via POST method. We take this object and add and update in "posts" in "state".

handleAdd = async () => {
    const obj = { title: 'a', body: 'b' };
    const { data: post } = await axios.post(apiEndpoint, obj);
    const posts = [post, ...this.state.posts];
    this.setState({ posts });
};

PUT or PATCH method is to update single item. The main difference between PUT and PATCH is PUT is more generic which allows us to update more than one properties. PATCH is more specific to update a single property in object. The following code technic I learned from Mosh was so useful and simple. setState in React is sometimes JS Array challenge as my experience. We can always find a way, but takes some effort to find a right and efficient way.

handleUpdate = async post => {
    post.title = 'updated title';
    const { data } = await axios.put(apiEndpoint + '/' + post.id, post);
    /* the following commented is for PATCH API as reference */
    // axios.patch(apiEndpoint + '/' + post.id, {title: post.title});
    const posts = [...this.state.posts];
    const index = posts.indexOf(post);
    posts[index] = post;
    this.setState({ posts });
};

DELETE method is pretty simple. In setState, a popular filter function in React is used.

handleDelete = async post => {
    await axios.delete(apiEndpoint + '/' + post.id);
    const posts = this.state.posts.filter(p => p.id !== post.id);
    this.setState({ posts });
};

All the above methods are based on "pessimistic updates" which means we want to ensure the backend update is updated before updating user view on the frontend side. The cons of this implementation is user may experience slow response from POST, PUT, DELETE methods.

Another way of implementation is "optimistic updates". Optimistic update is updating frontend first and running server side job at its background. This way can largely improve the responsiveness for user experience on the frontend side, however, we wishfully assume everything just works fine at the backend side.

We can still add a simple code change to rollback any changes made on the frontend side in case of a failure from the backend side. Here is a simple code change example with DELETE method.

handleDelete = async post => {
   /* store the current state in previousPosts, just in case of server side fail */
    const previousPosts = this.state.posts;
 /* optimistically, update on browser side, */
    const posts = this.state.posts.filter(p => p.id !== post.id);
 this.setState({ posts });

 /* server side update.  If any fail, rollback the state */
    try {
     await axios.delete(apiEndpoint + '/' + post.id);
     } catch (e) {
     this.setState({posts: previousPost});
   }

};

Personally, the above code with optimistic update with try-catch is the best fit for both user experience and recovery from any server side failure.

Reference: https://codewithmosh.com/

WebSocket vs. Long polling HTTP

Chan Ho Ahn — Tue, 13 Nov 2018 18:51:50 +0000

WebSocket is a standard protocol for two-way data transfer between a client and a server. The webSocket protocol is built on TCP, not running on over HTTP protocol. Using HTTP polling is hugely disadvantageous as it wastes resource and may cause connection time out.

I recently worked on Chatapp using AJAX for storing chat history to DB on the server side. The server side also runs Socket.io. As AJAX was to GET/POST chat data to DB on server side, I didn't expect the Socket.io client would also use HTTP AJAX polling for socket.io but it did use HTTP polling over AJAX.

Here is brief explanation of the difference between HTTP long polling via AJAX and WebSockets only.

With long polling via AJAX, the server keeps polling WSGI server to check any new data. HTTP is not meant for keeping the connection open for the server to send frequent data to a client. The following is a sort of old way of implementing long polling via AJAX requests.

By using WebSockets, the server response (or data push) is more efficient. Server side does not need to keep sending no payload packet to a client. Its benefit is more distinctive as a server serves a large number of clients.

If you still need to use AJAX and Socket.io together, you could still force Socket.io to use Websocket only. The following method would even remove any initial XHR request to initiate Websocket between client and server. That is fantastc!

Server Side:

The 2nd line of the following can force the server to use WebSocket only.

module.exports = function(io) {
io.set('transports', ['websocket']); 
io.on('connection', socket => {
socket.on('join', params => {

Client Side:

The 1st line of the following is tells Socket.io client to use WebSocket only even though AJAX is used in the same client code.

const socket = io({ transports: ['websocket'] });
const postMessage = function(message) {
$.post('http://localhost:5000/api', message);
};

This simple trick works fine with the most modern web browsers except old IE9. It is recommend avoiding any XHR fallback and only use WebSockt transport.

Reference:
https://www.fullstackpython.com/websockets.html

Socket.io for simple chatting app

Chan Ho Ahn — Mon, 05 Nov 2018 21:23:45 +0000

In a basic chat application, a user first enters into the chatroom. The user is first greeted with welcome message.

Server sides does "greet message" to new entered user(s) only. The users obviously don't want to be greeted after the first welcome message.
The user start sending messages to another user but won't want to broadcast to everyone.

"io" is a Socket.IO server instance attached to an instance of listening for incoming events.

The io variable represents the group of sockets. The socket variable is only for communicating with each individual connection.

List of socket.io functions

socket.emit('message', "this is a test"); //sending to sender-client only
socket.broadcast.emit('message', "this is a test"); //sending to all clients except sender
socket.broadcast.to('game').emit('message', 'nice game'); //sending to all clients in 'game' room(channel) except sender
socket.to('game').emit('message', 'enjoy the game'); //sending to sender client, only if they are in 'game' room(channel)
socket.broadcast.to(socketid).emit('message', 'for your eyes only'); //sending to individual socketid
io.emit('message', "this is a test"); //sending to all clients, include sender
io.in('game').emit('message', 'cool game'); //sending to all clients in 'game' room(channel), include sender
io.of('myNamespace').emit('message', 'gg'); //sending to all clients in namespace 'myNamespace', include sender
socket.emit(); //send to all connected clients
socket.broadcast.emit(); //send to all connected clients except the one that sent the message
socket.on(); //event listener, can be called on client to execute on server
io.sockets.socket(); //for emiting to specific clients
io.sockets.emit(); //send to all connected clients (same as socket.emit)
io.sockets.on() ; //initial connection from a client.

User input starts with simple HTML input form here.

There are three places you can get started with.

Client: Input from HTML form
Client: Event listener on client side with client side socket.io,
Server: Receive message and emit out to client with server side socket.io.

In the following example, "sendMessage" channel is from client to server. "receiveMessage" is from server to client. The server takes the message over sendMessage from client and send back to all clients over receiveMessage channel.

It initially may look confusing but it is pretty simple.

Client --> sendMesssage --> Server
Server <-- receiveMessage -- Server

Client side, HTML 
 id="messages" is to display broadcasted messages. 
 id ="message-form" is to hold input-field.   

<ol id="messages"></ol>
<form action="" id="message-form">
<input type="text" name="message" id="message" placeholder="enter message">
<button>Send</button>
</form>

Client side, JS
// First entered message is emitted after button click event.  This message is sent through "sendMessage" channel.  Server side will receive message through "sendMessage" channel, then, it emits to all clients connected to the server.

$('#message-form').on('submit', function(event) {
    event.preventDefault();
    socket.emit(
        'sendMessage',
    {
        from: 'User',
        text: $('#message').val()
    },
    () => {//callback function here }
  );

// Client side event listener.  It takes new messages from the server and appends it to HTML.  
socket.on('receiveMessage', message => {
    console.log('receiveMessage -- client side', message);
    const li = $('<li></li>');
    li.text(`${message.from}: ${message.text}`);
    $('#messages').append(li);
});

Server side, JS : 
// io.on from server side listens all incoming events.   Socket.emit inside io.on emits only "receiveMessage" message to all clients connected to the server.   Socket.emit only emit to sender-client while Socket.broadcast sends to every client except the sender itself.

io.on('connection', socket => {
    console.log('New user connected -- msg from server');
    /* socket.emit does Welcome message to new chatter */
    socket.emit('newMessage', chatMessage('Chatbot', 'Welcome'));
    /* socket.braodcast.emit from Admin to new user joined. */
    socket.broadcast.emit(
        'newMessage',
        generatedMessage('Chatbot', 'New User joined')
    );
     /* socket.on listens "sendMessage" from client and io.emit sends the message out to clients */
    socket.on('sendMessage', (message) => {
    console.log('Send message -- server side', message);
    io.emit('receiveMessage', chatMessage(message.from, message.text));
    });


const chatMessage = (from, text) => {
    return {
        from,
        text,
        time: new Date().getTime()
   };
};

You could add the chat history to the database such as Mongo or SQL. Plan to add it later.

Reference…
https://stackoverflow.com/questions/32674391/io-emit-vs-socket-emit

What does it mean "Arrow function will not rebind "this"?"

Chan Ho Ahn — Fri, 26 Oct 2018 15:15:07 +0000

What does it mean "arrow function won't rebind "this"" ?

How to reference to the person object inside from callback function? The referenced callback function is "setTimeout()" in the following example.

[Code #1 ]
const person = {
  walk() {
    setTimeout(function() {
      console.log('this', this);
    }, 1000);
  }
};
person.walk();

The following is the result from Code #1.

[Code #1 Result]
index.js:4 this 
    1. Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

As you run the above example, "this" returns Window object. It is definitely not what we want to see. "this" inside callback function references to outside of person object in this case. Even if "strict mode" is enabled we still see the same problem. The reason for this unexpected behavior is "this" in Javascript runs differently from other languages. "this" in Javascript rebind "this" inside the callback function which means "this" points to "Window" object as it is passed into the callback function.

There are two different ways to address this problem. [Code #2] and [Code #3] show an old way and a new way, respectively.

If we don’t want to use "arrow function in ES6", we can still use an old way to fix this problem. We can pass "this" to another const value such as "self" to store the state of "this" to "self" before invoking callback function. "self" in the callback function stores the prior state of "this" such that "this" still can be updated inside of the callback function while "self" contains the previous state of "this". Obviously, "self" stores "person" object with walk() method in it.

[Code #2]
const person = {
  const self = this;
  walk() {
    setTimeout(function() {
      console.log('self', self);
    }, 1000);
  }
};
person.walk();

[Code #2 Result ]
this 
    1. {walk: ƒ}
        1. walk: ƒ walk()
            1. arguments: null
            2. caller: null
            3. length: 0
            4. name: "walk"
            5. prototype: {constructor: ƒ}
            6. __proto__: ƒ ()
            7. [[FunctionLocation]]: index.js:2
            8. [[Scopes]]: Scopes[1]
        2. __proto__: Object

The arrow function (=>) helps to resolve "this" rebinding. ES6 Arrow function will not rebind "this" inside the callback function. If we change the callback function into arrow function, "this" is inherited into the callback function. Simply change the callback function into arrow function... That's all you need to do.

[Code #3 ]
const person = {
walk() {
    setTimeout(() => {
        console.log('this', this);
    }, 1000);
    }
};
person.walk();

[Code #3 Result]
    1. {walk: ƒ}
        1. walk: ƒ walk()
            1. arguments: null
            2. caller: null
            3. length: 0
            4. name: "walk"
            5. prototype: {constructor: ƒ}
            6. __proto__: ƒ ()
            7. [[FunctionLocation]]: index.js:2
            8. [[Scopes]]: Scopes[1]
        2. __proto__: Object

Hope that this post can help understand ES6 arrow function and how it solves "this" rebinding in callback function.

Node.JS and AJAX

Chan Ho Ahn — Mon, 24 Sep 2018 02:24:09 +0000

REST defines a set of conventions to create HTTP services. The basic four methods can create CRUD (Create, Read, Update, Delete)
• POST: Create a resource
• GET: Read a resource
• PUT: Update a resource
• DELETE: Delete a resource

In frontend side, you could do CRUD with form input as an example. The following is an example with POST. This case is pretty simple to run POST method only with HTML from front-end side.

///HTML Front-end: 

{{<form action="/api" method="post">
    <input type="text" class="form-control" name="text">
    <button class="btn btn-default" type="submit">
</form>}}

/// NODE.JS Back-end:
router.post('/api', (req, res) => {
    const todo = new Todo({
    text: req.body.text,
    completedAt: Date.now()
    });
    todo
    .save()
    .then(todos => res.redirect('/'))
    .catch(err => res.status.send(err));
});

However, if you don't have form input or form input may take different types of methods within it, you may need to take a different approach such as AJAX.

The following is an example of AJAX. Combining HTML and AJAX is front-end operation while Node.JS with DB (e.g. MongoDB) is the backend operation.

(1) Take button click event and take attribute from 'data-id'.

(2) Run AJAX DELETE method. You should make sure that its Method and URL are correctly match between AJAX side and Node.JS + DB side.

(3) I was trying to redirect by using res.redirect('url') in back-end side, but it didn't work. I learned that you cannot send redirect response to AJAX call, but you should let the browser reload the page. "window.loaction.reload()" does the job here.

/// Front-end : HTML side: 
<button class="btn-danger" id="delete-btn" data-id="{{this._id}}">X</button>

///Front-end: AJAX side; 
$('.todo-list-group').on('click', '#delete-btn', function(event) {
    event.preventDefault();
    const id = $(this).attr('data-id');
    $.ajax({
        url: '/api/delete/' + id,
        method: 'DELETE',
        data: { id: id }
        }).done(function(res) {
            if (res.success) {
            console.log('id from ajax call is', res);
            window.location.reload();
        } else {
            console.log('error...ajax');
            }
});

/// Back-end: Node.js + Mongoose (MongoDB)
router.delete('/api/delete/:id', (req, res) => {
    Todo.deleteOne({ _id: req.params.id })
    .then(() => {
        res.json({ success: true });
    })
    .catch(err => {
        res.status.json({ err: err });
    });
});

Method override for PUT and DELETE in HTML

Chan Ho Ahn — Wed, 12 Sep 2018 15:42:08 +0000

Following four HTTP methods are commonly used in REST.
• GET - This is to provide a read-only access to resource.
• PUT - This is to create a new resource
• DELETE - This is to remove a resource
• POST - This is to update a existing resource or create a new resource.

When we try to use PUT and DELETE in HTML, we have a problem. Browsers do support PUT and DELETE but it only by using request via AJAX, but not via 'HTML form' submission.

In both HTML4 and HTML5 spec, it says that the only HTTP methods that HTML form element should allow are "GET" and "POST". There is no clear reason why PUT and DELETE are not supported by 'HTML form'. My understanding is POST can be more effectively reused to support PUT and DELETE method. PUT and DELETE typically don't redirect to an appropriate page, while POST will redirect accordingly. We probably don't need to reinvent PUT and DELETE method for HTML but just reuse POST in this case (this is my opinion).

As the purpose of this page to understand how to use "method override" middleware to get around this problem.
The following is probably the most popular way to get it done.

First, install npm package for method-override.

$ npm install method-override

The idea is to use a header to override the method. The following example is to override POST method to create PUT and DELETE method.

Specify the header name a string argument of "methodOverride"
const methodOverride = require('method-override');

Override with '_method' header in the request. You can choose your own header.
app.use(methodOverride('_method'));

'post' is allowed method by HTTP form. We can override this post method for the following "put" and "delete" method.
app.post('/ideas', (req, res) => { // });

"put" method is overriden post method.
app.put('/ideas/:id', (req, res) => { // });

"delete" method is overriden post method.
app.delete('/ideas/:id', (req, res) => { // });

Query override using HTML form. The following is for "post".
<form action="/ideas/{{idea.id}}?_method=PUT" method="post"> <input type="hidden" name="_method" value="PUT"> </form>

Query override using HTML form. The following is for "delete".
<form method="post" action="/ideas/{{id}}?_method=DELETE"> <input type="hidden" name="_method" value="DELETE"> </form>