About JavaScript Fullstack, why not call backend functions directly?

How we comunicate with server now?

• the most pupular way, REST api with fetch or axios

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

• or GraphQL

const GET_ALL_TODOS = gql`
  query GetAllTodos {
    todos {
      edges {
        node {
	  completed
	  id
	  text
	}
      }
    }
`;

export const Todos = () => {
  const { loading, error, data } = useQuery(GET_ALL_TODOS);
  ...
}

• or realtime solutions, websocket, SSE

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
  });
  socket.emit('chat message', input.value);
});

• others, xml/protobuff….

axios.get('/api/messages', {responseType: 'arraybuffer'})    
  .then(function (response) {
    console.log('Response from the server: ', response)    
    let msg = Message.decode(response.data)    
    console.log('Decoded message', msg)
  })

Fullstack solution come to help!

they make you use backend data easier

• meteor, call mongo collections just look like mongo api

import React from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { TasksCollection } from '/imports/api/TasksCollection';
import { Task } from './Task';
 
export const App = () => {
  const tasks = useTracker(() => TasksCollection.find({}).fetch());
 
  return (
    <div>
      <h1>Welcome to Meteor!</h1>
      <ul>
        { tasks.map(task => <Task key={ task._id } task={ task }/>) }
      </ul>
    </div>
  );
};

ember.js, auto map model data into template

import Route from '@ember/routing/route';

export default class ScientistsRoute extends Route {
  model() {
    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
}
---
<h2>List of Scientists</h2>
<ul>
  {{#each @model as |scientist|}}
    <li>{{scientist}}</li>
  {{/each}}
</ul>

• there are also firebase/rethink like solutions, I really love firebase but the thing is it cannot be hosted on your own server

var ratingRef = firebase.database().ref("ratings/");
ratingRef.orderByValue().on("value", function(data) {   
   data.forEach(function(data) {
      console.log("The " + data.key + " rating is " + data.val());
   });   
});

Finially, Why not call backend functions directly?

like this

import { Cat } from '../common/Cat.mjs'
export const hello = async name => {
  let cat = await Cat.findOne({})
  return `hello ${name}! from ${cat.name}`
}
----
import { hello } from "../apis/hello.mjs";
(async () => alert(await hello('world')))()

yes you can now, with shack.js

shack-js/shack.js