About JavaScript Fullstack, why not call backend functions directly?

Josh Lin
2 min readJun 29, 2021

--

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

--

--