The new Era
of Full-Stack

A Hitachi Group Company

Volodymyr Vyshko

Plan

The full-stack 10y ago vs now
Is full-stack in demand on the market
Is it worth it?
Trends
Quiz

A Hitachi Group Company

Quiz gift!

Full-Stack

10 years ago

A Hitachi Group Company

2012

A Hitachi Group Company

2012

A Hitachi Group Company

2013

A Hitachi Group Company

2023

A Hitachi Group Company

2023

A Hitachi Group Company

2023

A Hitachi Group Company

https://layoffs.fyi/

A Hitachi Group Company

Be flexible and adaptable

Network with other IT professionals

Keep up with the latest trends

A Hitachi Group Company

Trends 2024

A Hitachi Group Company

Repetetive tasks / code generation

A Hitachi Group Company

A Hitachi Group Company

SSR - Server Side Rendering

A Hitachi Group Company

// routes/index.js
import { useLoaderData } from "remix";
import prisma from "~/lib/db.server";

export const loader = async () => {
  // Fetch all the users from the Prisma SQL DB
  const users = await prisma.user.findMany();
  // Return the users as the loader data
  return users;
};

// Add an action that handles the POST request
export const action = async ({ request }) => {
  // Get the form data from the request
  const formData = await request.formData();
  // Get the values from the form data
  const name = formData.get("name");
  const email = formData.get("email");
  // Create a new user in the Prisma SQL DB
  const user = await prisma.user.create({ data: { name, email } });

  // Redirect to the same route with a success message
  return redirect(request.url, {
    headers: { "X-Message": `User ${user.name} created successfully!` },
  });
};

export default function Index() {
  // Use the loader data in the component
  const users = useLoaderData();
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <p>{user.name}</p> <p>{user.email}</p>{" "}
          </li>
        ))}
      </ul>
      <form method="post">
 
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" required />
        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" required />
        <button type="submit">Create User</button>
      </form>
    </div>
  );
}

A Hitachi Group Company

Custom AI interface

Site index / Training data

Generate model

Open AI API

Perform Open AI call with custom model

const response = await openai.createChatCompletion({
  model: "skt-1234abcd",
  messages,
  max_tokens: 150,
  temperature: 0,
});

const { Configuration, OpenAIApi } = require("openai");
const fs = require("fs");

const configuration = new Configuration({
  apiKey: "sk-XXXXXXXXXXXXXXXXXX",
});

(async () => {
  const openai = new OpenAIApi(configuration);
  const response = await uploadfile(openai);
  console.log("response ::: ", response.data);
})();

function uploadfile(openai) {
  return openai.createFile(fs.createReadStream("mydata.jsonl"), "fine-tune");
}

link

A Hitachi Group Company

BFF

A Hitachi Group Company

Best Friends Forever

Backend For Frontend

A Hitachi Group Company

BFF

Frontend dev

Backend dev

A Hitachi Group Company

BFF vs SSR

vs Gateway API

A Hitachi Group Company

Serverless

A Hitachi Group Company

NestJS + Serverless + Lambda + AWS

import { Handler, Context } from 'aws-lambda';
import { Server } from 'http';
import { createServer, proxy } from 'aws-serverless-express';
import { eventContext } from 'aws-serverless-express/middleware';

import { NestFactory } from '@nestjs/core';
import { ExpressAdapter } from '@nestjs/platform-express';
import { AppModule } from './app.module';

const express = require('express');

const binaryMimeTypes: string[] = [];

let cachedServer: Server;

async function bootstrapServer(): Promise<Server> {
 if (!cachedServer) {
    const expressApp = express();
    const nestApp = await NestFactory.create(AppModule, new ExpressAdapter(expressApp))
    nestApp.use(eventContext());
    await nestApp.init();
    cachedServer = createServer(expressApp, undefined, binaryMimeTypes);
 }
 return cachedServer;
}

export const handler: Handler = async (event: any, context: Context) => {
 cachedServer = await bootstrapServer();
 return proxy(cachedServer, event, context, 'PROMISE').promise;
}

sls deploy -v

service:
 name: nest-serverless-lambda-demo

plugins:
 - 'serverless-plugin-typescript'
 - serverless-plugin-optimize
 - serverless-offline

provider:
 name: aws
 runtime: nodejs12.x

functions:
 main: # The name of the lambda function
   # The module 'handler' is exported in the file 'src/lambda'
   handler: src/lambda.handler
   events:
     - http:
         method: any
         path: /{any+}

A Hitachi Group Company