Maybe the easiest way to go from web front end to fullstack

Before we start

I always believe web front end is not enough, through there are guys working every day coding CSS only. But even a frontend work with JavaScript, HTML and CSS, have strong knoledge of browser mechanics, network protocals and greate data structure and algorithm, such a guy is perfect? Still very limited I believe.

Why? Because you cannot design a whole system, you can not do anything backend, you need to follow what the backend designs. It’s different when you design a whole system, there are alway better ways, to reduce latency, to make better user experience.

So suggest you go from web frontend to fullstack, and frontended makes it super easy

What is `frontended`?

It’s a set of tools to make developing backend code easier for frontend developers. It’s my side project and open source: https://github.com/postor/frontended

How to use it?

• 1st: place backend code inside backend and frontend code inside src

// backend/frontended/test-folder/hello.js
const os = require('os')
module.exports.hi = ({ name }) => `你好 ${name}，我是个 ${os.platform()} 服务器。| Hello ${name}, I am a ${os.platform()} server`
// src/app.js
import { hi } from '../backend/frontended/test-folder/hello'  
;
(async () => document.write(await hi({ name: 'abc' })))()

• 2nd: export backend functions inside backend/frontended for frontend use

// backend/frontended/test-folder/hello.js
const os = require('os')
module.exports.hi = async({ name }) => `你好 ${name}，我是个 ${os.platform()} 服务器。| Hello ${name}, I am a ${os.platform()} server`
// always use module.exports.xxx = yyy, and yyy need to be async functions and take only object param or frontended won't work

• 3rd: import/require exported backend functions inside src

// src/app.js
import { hi } from '../backend/frontended/test-folder/hello'  
;
(async () => document.write(await hi({ name: 'abc' })))()
// always use await or use return value as Promise, or frontended won't work

• 4th: config webpack build and run with proper runner, and it will just work

// webpack.config.js
module.exports = {
  entry: "./src/app.js",
  output: ...,
  module: {
    rules: [
      {
        test: /backend[\/|\\]frontended[\/|\\].*\.js$/,
        use: {
          loader: 'frontended/axios-loader',
          options: {
            apiPrefix: '/api',
            backendFolder: 'backend/frontended'
          }
        }
      }
    ]
  },
  ...
} 
# run in shell
npx @frontended/express-runner

now it’s working

Who need it?

This project was designed for frontend developers, they do not need to have strong knoledge of backend, they can search some Node.JS API and then just use inside his frontend project.

For example, in side a webpack app, if you want to manage file on the server, you just need to search some fs api, and export functions you need inside backend/frontended and use inside src , config your webpack and run with @frontended/express-runner and it will just work

Why it’s good?

• Focus on your logic, not learning frameworks

learn things about server, routing, body parser and so on

• Good hinting inside IDE, no need to search for REST API docs

easy track which code you are calling

• Might be able to generate micro-service project (plan to generate moleculer project, no hard part but needs coding, not sure if I will have time and when it will finish)

How it works?

• the build process

At last

You can issue or contribute on github

postor/frontended