DEV Community: Long Nghiem

Hack your TensorFlow.js experience to the next level 🚀

Long Nghiem — Fri, 14 May 2021 07:12:52 +0000

TL;DR;

Our AI specialist at ScaleDynamics built Tensorflow.js snippets ready to use, so you can get on directly with testing and building TFJS right from the browser.

We started with the most used cases:

Using video feed: Face detection
Using microphone feed: Sound spectrogram ; Sound speedup
Doing inference with Node.js
Text classification: Toxicity

He also added explanations on the Face Detection and Sound Spectrogram snippets to help you understand them easier

All snippets are available on our free Playground where you can code frontend & backend directly from the browser.

Hope you guys like it!
MadeWithTFJS ❤

AI in the browser
Tensorflow.js seems easy, but not that easy!
A simple way to use Tensoflow.js right in the browser
TensorFlow's snippets by use cases
Play and learn more effectively on the Playground

AI in the browser

Artificial intelligence and machine learning have been gaining interest and increasing adoption in many applications over the last 6 years. As you might already know, TensorFlow.js has shown an incredible amount of contribution to the JavaScript community, bringing us closer to AI and machine learning. It helps JavaScript developers to build machine learning models using only JavaScript and use it directly in the browser or in Node.js.

In this article, we would like to introduce a new way to learn and play with TensorFlow.js that promisingly provides you with the easiest way to code Tensorflow.js

In case you want to have an in-depth introduction to TensorFlow.js and its application in machine learning, you can check out Dominique’s Introduction to TensorFlow.js, the AI stack for JavaScript

Dominique d’Inverno is an AI and algorithm development engineer at the ScaleDynamics starship 😎. With his 20 years of experience in embedded electronics design, mobile computing systems architecture and mathematical modeling, he built the TFJS snippets that we are going to present today. 😉

So with no further ado, let’s get started!

TensorFlow.js seems easy, but not that easy!

Since its first version in 2018, TensorFlow.js’ team has been working hard in order to align itself with Keras (Python). So far, you can directly use or retrain its +1,000 pre-trained models or convert a Python TS model to build your own one in JavaScript, in the browser, on the client-side. Basically, you can easily perform complex tasks like visual recognition, generating music or detecting human poses with just a few lines of JavaScript.

However, inference on big data sets in browsers is not really efficient in terms of performance due to model and data loading time as well as computing capabilities.

That’s where Node.js saves the day and increases performance by deploying on a high-performance GPU/CPU engine and in the network under the hood of the dataset.

Source: Opportunities and Challenges for TensorFlow.js and beyond - by Jason Mayes

As you can see in the illustration from TensorFlow.js, to make it work smoothly, you will have to take care of different API layers between your client-side and backend Node.js such as the Core or Ops API that allows you to do linear algebra, the Layers API which is the high-level one that helps you do machine learning easier.

Here comes the hard part, you will face complexity when trying to address distributed processing for the next performance step.

HTTPs and JSON management are quite complicated and redundant for developers, even an experienced ones. Even a single misplaced comma or colon can cause a JSON file to go wrong, and not work. You have to be careful to validate any data you are attempting to use (although computer-generated JSON is less likely to include errors, as long as the generator program is working correctly).

Now, imagine how efficient you can be if you can automate this process?

A simple way to use Tensoflow.js right in the browser

Acknowledging the problem, we have been developing a unique compiler technology used in the ScaleDynamics Platform. It enables easy process distribution with very little development effort, and you can see it in action on our Javascript Full Stack Playground.

To ease coding, instead of creating HTTP endpoints and use HTTP calls to execute a remote inference, you just need to build a client for this inference function, deploy and import it in the main application (via import statement in index.js or via script tag in HTML) and then call it like any JavaScript function.

In action: Tensorflow.js face detection

Take a look at this snippet on our Playground to see how easy it is and to see the demo in action: TensorFlow.js face detection or you can check out the code snippet below:
In the beginning, the blazeface model is loaded in the back-end context to reduce further latencies :
Frontend:

await backend.loadBlazeface();

Backend:

const tf = require('@tensorflow/tfjs'); require('@tensorflow/tfjs-node');
const blazeface = require('@tensorflow-models/blazeface');
let model;
...
exports.loadBlazeface = async function () {
   model = await blazeface.load();
}

Images are captured in a front-end canvas offCanvas (this name because this canvas is not displayed) via its associated context offContext and converted to a blob :
Frontend :

offContext.drawImage(video, 0, 0, w, h);
offCanvas.toBlob(process, 'image/jpeg', 0.9);

Once the conversion is finished, blazeface detection model is invoked within process callBack :

const process = async (blob) => {
const buff = await blob.arrayBuffer();
if (hideProc.value == 'browser'){
// perform faces detection (blazeface inference) on server
const faces = await backend.detect(buff);
// perform hiding/blurring on browser
hideAndDraw(faces);
...

On the back-end server, the detection function simply decodes jpeg, infers blazeface, performs cosmetic size adjustments on detected boxes, and sends back the detection result.

exports.detect = async function (imageBuf) {
//imageBuf : ArrayBuffer of jpeg base64 string
const jpjs = require('jpeg-js');
// fetch & decode image
let image = jpjs.decode(imageBuf);
// detect faces
const faces = await model.estimateFaces(image, false, false, false);
...
return faces;
}

In action: Tensorflow.js sound spectrogram

In a way similar to the face detection snippet, sound chucks and computed spectrum amplitudes are passed as ArrayBuffer arguments.
Audio is captured using a MediaRecorder element stopped and restarted at a TIMEFRAME periodicity.
Frontend:

var recorder = new MediaRecorder(inStream);
let blob;
recorder.start();

recorder.onstart = function (e) {
analyser.fftSize = parseInt(fftPoints.value);
sleep(TIMEFRAME).then (() => recorder.stop());
};

recorder.ondataavailable = function (e) {
blob = e.data;
};

recorder.onstop = async function(e) {
if (processOn.value == 'browser') {
// process spectral analysis on browser
const freqU8 = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqU8);
drawSpect(freqU8);
} else {
// Perform backend-spectral analysis
const soundBuf = await blob.arrayBuffer();
const soundDec = await audioCtx.decodeAudioData(soundBuf);
const chan0 = soundDec.getChannelData(0);
const freqBuf = await backend.soundSpect(chan0.buffer, parseInt(fftPoints.value));
const freqF32 = new Float32Array(freqBuf);
// draw spectrogram result
drawSpect(freqF32);
}
// restart recorder after process and display
chunks = [];
if (! finished) recorder.start();  else console.log('analysis terminated');
};

The back-end function is quite straight forward: a spectral analysis using Tensorflow tf.signal.stft utility, and log scaling.

Backend:

const tf = require('@tensorflow/tfjs-node');

exports.soundSpect = async function(inBuf, fftSize) {
const chan0 = new Float32Array((new Uint8Array(inBuf)).buffer);
const signal = tf.tensor1d(chan0);
const res = tf.signal.stft(signal, fftSize, Math.floor(fftSize*0.8), fftSize)
                 .abs() ;
// add 30 db gain and normalize to max Uint8 value to match
// browser analyzer defaults
const freqs = res.mean(axis=0).mul(1000).log1p().mul(255*Math.log10(Math.E)/Math.log10(fftSize)).dataSync();
tf.dispose([signal, res]);
return freqs.buffer;
}

With these examples, you can see the simplicity of coding with TensorFlow.js on our Playground.

TensorFlow.js provides an easy approach to machine learning and artificial intelligence, we help you do it easier by eliminating the painful part of coding in Full Stack! 😉

TensorFlow's snippets by use cases

You can easily search with the keyword ‘TFJS’ or ‘MadewithTFJS’ on the search bar, there will be a lot of cool stuff for you to explore.

Video feed

Tensorflow.js face detection (shown above)
This faces detection snippet was already shown above but in case you missed it, it streams video from a webcam live stream on the backend, and applies a black or blurred overlay on detected faces regions, either on frontend or backend. Images are passed (in or out) to the back-end as ArrayBuffer function arguments.

Sound feed

Tensorflow.js sound spectrogram (shown above)
This snippet streams audio from the device microphone and displays a live spectrogram, whose frequencies are computed on the frontend side with an audio API analyzer or on the backend side using tensorflow.js utility.

Tensorflow.js sound speedup
This snippet performs sound/speech capture, increases sound speed on a server, using simply fixed time frames cross-fading algorithm, then plays it back on the device.
The code structure is quite similar to spectrogram snipped.

Inference

Tensorflow.js interference
This snippet shows how to use Tensorflow.js on the Node.js back-end side to apply furthermore on AI, through buildup and training of a simple sequential neural network.

Text classification

Tensorflow.js toxicity detection
Another example for applying Tensorflow.js on your AI projects, this time, the author infers a pre-trained TensorFlow model for toxic words detection on a text box, showing how to integrate that as a feature in your projects.

Play and learn more effectively on the Playground

The JavaScript Full Stack Playground allows you to code both frontend and backend Node.js in the same place with integrated live-reload. By automatizing HTTPs/JSON management, it also offers a unique HTTP-less experience which makes learning TensorFlow.js easier than ever.

Having access to a diverse snippets library for TensorFlow.js, React, Angular, Vue.js, Bootstrap, MongoDB… and a place to exchange ideas with the growing community, it will probably give you an extra boost to become Full Stack faster than you think 😉

The JavaScript Full Stack Playground is FREE for the developer community, you can easily create an account, get on it and start playing and testing your project with TensorFlow.js, or check what others are doing!

Get your FREE developer plan in this link
To keep yourself updated, feel free to follow us on Twitter, Facebook, Instagram. I guarantee that it’ll be fun, and you’ll never miss a single new snippet on the Playground 😎✨

📣 FREE Community Plan for JavaScript Dev to develop faster 🚀

Long Nghiem — Tue, 13 Apr 2021 12:58:22 +0000

Hi there Full Stack community 👋

I guess some of you might already know about and already tested your code on the JavaScript Full Stack Playground. We would like to thank you for your interest and your contribution to the Full Stack community 🍻 🎉. We want to thank everyone who participated and gave feedback on the Playground.

Today, we proudly announce that the JavaScript Full Stack Playground just got a Free Developer Plan! You’ll have to access to the next-generation HTTP-less web platform, guaranteed to bring you a unique and fun experience of coding in Full Stack 🤯. Please note that you'll need to sign in only to deployment😉:

The JavaScript Full Stack Playground, an in-browser code editor for frontend and Node.js backend
The ScaleDynamics Platform and its production-grade SDK for projects

With no further ado, let's get started!

Production-grade SDK

Discover our production-grade SDK for projects - a new way to develop faster than never before, automate away mundane tasks, and focus on building your innovation. It offers a 100% managed Full Stack HTTP-less environment:

Our groundbreaking compiler generates the HTTP/JSON stubs required to call a Node.js function using JS objects.
The SDK manages the deployment & execution of the frontend & the Node.js backend on our cloud. Plug your managed database tier to bring your ideal full-stack stack to your developers.

You will never have to deal with Express.js, routing, doing HTTPs, and managing its errors, serialization, creating dockers, HTTPs custom domains, managing endpoints, and how to deploy and manage servers... The tool takes care of all that for you, it’s just magic! 😉🤯

Not just that, you can focus on your code logic by reducing more than 10000 lines of code in a project 😎

Our SDK also comes with lots of cool features such as cloud emulator, integrated live reload, deployment in one command line… and they are all waiting for you to discover! So why wait? Check it now here

JavaScript Full Stack Playground

The JavaScript Full Stack Playground might be quite familiar to some of you, but if it doesn’t, here’s its features:

Coding directly in HTTP-less mode in the browser for both front-end JavaScript and back-end Node.js (of course, without HTTPs and JSON management) 😉
Showing results in real-time with zero configuration
A public library of code snippets which makes it easier for you to get inspiration, to learn, test and prototype ideas
The public code snippet library will be added with more API tutorial snippets which allow you to test APIs directly within the playground.
Share your snippets with your team by sending them a playground URL to review and work with peer easier

Start coding in Full Stack today!

The Dev Community Plan is FREE for developers, you can easily create an account by clicking this link (non-commercial use).

And if you feel it’s interesting and want to explore more about the tech or just to keep yourself updated, feel free to follow our social media. I guarantee that it’ll be fun, and you’ll never miss a single update on our app version 😎✨

Twitter
Facebook
Instagram

Useful code snippets to become Full Stack faster 🚀

Long Nghiem — Tue, 30 Mar 2021 07:28:48 +0000

ScaleDynamics’s JavaScript Full Stack Playground is the first place where developers can code both frontend JavaScript and backend node.js directly in their browser.

To ease the coding, instead of using HTTP and JSON between your front and your Node.js backend, in the playground you use JavaScript call and JavaScript objects. It helps you save time by writing less code and offers a unique experience of coding Full Stack without being a Full Stack.⚡🍻 - you’re kinda transforming into a super saiyan!

The growing Full Stack community of the Playground provides a high volume of code snippets which make it easier and quicker for other developers to learn, test and prototype ideas 🤩
Here is the list of useful code snippets provided by the Playground’s Full Stack community which mainly focus on Node.js, React, MongoDB, Tensorflow.js…

So, with no further ado, let get into it 😎✨

Table of content

React based apps
Weather forecasting apps
Database/Dashboard
Tensorflow.js/AI

React based apps

React Hover card with REST API

This snippet was specifically built to demonstrate how to do a REST API on the backend and show the result on a hover card build with React.

React Hover card with JS Data

Another example of presenting personal information on hover cards. But this time, the snippet shows another way to do that using a Node.js backend providing JSON Data 😉

Location tracking by IP Adresse

Tracking visitor's geolocation on map using only its IP address.

Weather forecasting apps 🌄🌦️☔

Get 5 days forecast

Open Weather Map is a set of APIs to get weather forecasts for multiple cities. A 5 days forecast is available at any location or city. It includes weather data every 3 hours. You’ll need a demo key from rapidAPI to be able to run the snippet.

GetCurrentWeather_V1

Still using APIs from Open Weather Map, but with this snippet, you can get weather data in any location on the earth. The current weather data are updated online based on data from more than 40,000 weather stations. And just like the previous one, you’ll need a demo key to be able to run as well.

GetCurrentWeather_V2

This one provides access to current weather data for any location on Earth including over 200,000 cities! 🤯 This snippet collects and processes weather data from different sources such as global and local weather models, satellites, radars and vast networks of weather stations. That looks cool to you, don’t you think? 😉

GetHistoricalWeatherData

To get access to historical weather data for the 5 previous days. Parameters are composed with geographical coordinates (latitude, longitude) and DT date (unix time, UTC time zone).

Dark Sky Weather API

This sample shows how to use a Weather Dark Sky REST API, to get a weather forecast at a specific location.

Weather forecast widget

This snippet shows a forecasting widget that uses Open Weather Map API. You’ll need an API key from rapidapi.com, and subscribe to the Open Weather Map API.

Database/Dashboard 📈📊

Morris GraphLine

This snippet shows a Morris graph line example. Graph config and data are sent by the backend and the frontend shows it. Add your data on the backend side to test and reuse it for your needs!

Dashboard

This is a Dashboard example which could help you create a dashboard and visualize data easier.

Datatable

Example of a data table that shows random user data. Sorting, filtering, and pagination enabled. Feel free to use it in your snippets to show your own data!

MongoDBMovies

This example shows how to query a MongoDB movie database on the backend and show results. In this sample, the author fetches movies from the Sample Mflix Dataset provided by MongoDB Atlas.

Movie UI using MongoDB

This snippet shows a use case of a frontend and a proxy backend that access a MongoDB database. The backend uses mongoDB to request the movie posters. The frontend part is based on https://codepen.io/cb2307/pen/XYxyeY.

Movie UI using MongoDB Scrollable

This snippet is basically similar to the previous one, which also is to build a movies list page. But this time, it’s updated with scrollable feature and I bet it looks way cooler 😉

Tensorflow.js/AI

Tensorflow.js interference

This snippet shows how to use Tensorflow.js on the Node.js back-end side to apply furthermore on AI, through buildup and training of a simple sequential neural network.

Tensorflow toxicity detection

Another example for applying Tensorflow.js on your AI projects, this time, the author infers a pre-trained Tensorflow model for toxic words detection on the snippets, showing how to integrate that as a feature in your projects.

Tensorflow.js face detection

This faces detection snippet streams video from a webcam live stream on the backend, and applies a black or blurred overlay on detected faces regions, either on frontend or backend. Images are passed (in or out) to the back-end as ArrayBuffer function arguments.

Tensorflow.js sound spectrogram

This snippet streams audio from the device microphone and displays a live spectrogram, whose frequencies are computed on the frontend side with an audio API analyzer or on the backend side using tensorflow.js utility.

Tensorflow.js sound speedup

This snippet performs sound/speech capture, increases sound speed on a server, using simply fixed time frames cross-fading algorithm, then plays it back on the device.
The code structure is quite similar to spectrogram snippets.

Hop in, show off your snippets, and inspire others!

The JavaScript Full Stack Playground will remain FREE for public code snippets. You can easily create an account, get on it and start creating yours or playing with other people’s snippets to become Full Stack a lot faster than you think 😉

The first step is very simple, just sign up for the FREE developer plan in this link

The playground is part of our Managed Web application platform for Node.js. We provide an SDK to build and deploy projects using the same coding approach (no HTTP/JSON, just JS calls and JS objects) 🦄

Also, to clearly and fully understand the tech behind the Playground, you can take a look at this article in which our CEO explains how he created the Playground and its coding approach.

Stay tuned for cooler stuff coming!

4 steps to add a serverless back end to React

Long Nghiem — Tue, 15 Sep 2020 13:46:41 +0000

In this world, there're two kinds of web developers: those who code front ends, and those who code back ends… (inspired by Mr. Leone 🤠)

You, you want to be a full-stack. But deep in your heart, you know you belong to one of those two kinds. Wherever your natural skills are, this article will help you on the path of the JavaScript full-stack development. Serverless is a nice approach to avoid server management while scaling with virtually no limit. Let’s see how to make it even easier with ScaleDynamics, which spares us the HTTP coding parts on both sides.

In terms of serverless, I guess you already know Vercel — that offers static and Jamstack deployment, Serverless Functions, and Global CDN, however, I won’t talk about Vercel but about a newer serverless platform — ScaleDynamics which introduces a unique approach to code and deploy back-ends on serverless function (FaaS). It is basically kind of a Vercel for Enterprises — because you can deploy it on any cloud, even private clouds, and on-premise — with a new approach for developing and coding the APIs.

So without any further ado, let’s get started!

1. Initialize project

First, create your main React project:

npx create-react-app react-warp-tuto

2. Set up ScaleDynamics server

In this step, we will create a Basic HTTP proxy in Node.js in order to:

Fetch data from a REST API
Filter data to avoid to request too much data as client-side
Add random avatars in response (to make the rendered page look prettier ;)

To do so, let’s create a server directory at the root of your main project and initialize a new Node.js project inside it:

mkdir react-warp-tuto/server
cd react-warp-tuto/server; npm init -y
And install the [Axios library](https://www.npmjs.com/package/axios) we need:
npm install axios

Now, here’s the fun part! In the server subproject, we create an index.js in order to create back-end serverless function:

// server/index.js
const axios = require(“axios”);
const getUsers = async () => {
 // fetch users from API
 const { data } = await axios.get(“https://jsonplaceholder.typicode.com/users");
// Pick attributes and add photo
 return data.map(({ id, name, email, phone, company, address }) => ({
  id,
  name,
  email,
  phone,
  city: address.city,
  work: company.name,
  photo: “https://randomuser.me/api/portraits/lego/" + (id % 10) + “.jpg”,
 }));
};
// getUsers is the function that you will call from the Front-end
module.exports = { getUsers };

Did you notice that last line of code? That part is very important: it will technically tell ScaleDynamics to turn that function into a serverless function (FaaS) and to host it as a serverless function. Basically, you don’t need to deal with HTTPs, arguments, errors, endpoints… ScaleDynamics will do it all for you.

Then, we create a warp.config.js files to configure ScaleDynamics as follows:

module.exports = {
 // project name in the Warp console (demo is created by default)
 project: “demo”,
 output: {
  format: “node-module”,
  // path to the “node_modules” directory of your main project
  projectPath: “../”,
  // module name to import it in your main project
  name: “warp-server”,
 },
};

Regarding the project name, the ScaleDynamics console will be introduced further.

Thanks to the node-module output format, ScaleDynamics will generate a module named warp-server to be used in the client project. Consider it is a helper module, a stub, to call the server.

3. Setup ScaleDynamics in project

On the server-side, ScaleDynamics comes with a command-line interface to let you start a local emulator, build the project, and deploy it on a cloud.

On the client-side, you only need the Warp engine and the generated helper module to call the server API (this prevents us to make an HTTP call).

Back to our parent project, let’s install these small dependencies:

cd ..
npm install @warpjs/engine
npm install warp npm-run-all — save-dev

While it’s running, in package.json, let’s add the server parts in the start and build commands, plus the deploy command-line.

// package.json
“scripts”: {
+ “postinstall”: “cd ./server && npm install”,
- “start”: “react-scripts start”,
+ “start:client”: “react-scripts start”,
+ “start:server”: “warp start-emulator -w ./server”,
+ “start”: “run-p start:*”,
- “build”: “react-scripts build”,
+ “build:client”: “react-scripts build”,
+ “build:server”: “warp build ./server”,
+ “build”: “run-s build:server build:client”,
+ “deploy”: “warp deploy — asset-dir build/ ./server”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
},

Finally, to call a serverless function in your code, you have to import the Warp engine once. We recommend to initialize it in the entry point of your main project:

// src/index.js
import “@warpjs/engine”;

Regarding the UI, let’s replace the content of App.css, App.js, and add the Users.js component I prepared.
Let’s have a look through the way the serverless back-end is called in Users.js:

// imports the Warp helper module, to back-end wrapper
import WarpServer from “warp-server”;
// creates an instance of the helper
const { getUsers } = new WarpServer();
// async call to the serverless function
const users = await getUsers();

Then, when the promise is returned, the users state variable is set.

getUsers().then((data) => {
  this.setState({ users: data })
})

We’re all set, let’s test it now 🤞 🙏🏻

4. Run

As we will deploy our project on the cloud, we first need to authenticate ourselves with a ScaleDynamics platform account. If you do not have one yet, you can request a free trial with this link. It’s free, spam-free, and comes with free credits. When it’s
done, let’s get back to our console to log in:

npx warp login

In the Warp console, there is by default a “demo” project. For new projects, you will just need to create a new one and to use the same name in your warp.config.js “project” attribute.

Let’s run the project now. This command-line will run a serverless emulator for the back end, with ScaleDynamics, and will start a React server as usual.

# run a dev server:
npm run start

The browser window opens itself with our wonderful list of fake users with Lego avatars. Feel free to update the front end or back end without killing your servers, it both supports live-reload 😎

Now let’s kill this local server (Ctrl+C twice) and deploy it on a cloud.

# build and deploy to production
npm run build
npm run deploy

ScaleDynamics deploys the back end on FaaS platform GCP functions (as I write these lines, more options exist though), and the front-end on a Google storage (for the sake of this demonstration).

Your project is now ready!

So, at this step, you get your URL, client, and server which are hosted. Throughout the process, we did not have to deal with any HTTP requests, route, security, endpoints, errors…that saved us lots of headaches and tons of time.

To integrate with other frameworks, you can find a lot of code samples for many use cases in GitHub, I recently recorder a tutorial video for Vue.JS, and you can find step-by-step tutorials for Angular and Vue.js.

I hope you’ve found this tutorial helpful and if you have any questions, don’t hesitate to leave it in the comment section below 🙂

The last article in this series is for Angular, so stay tuned 🤟

Credits

Big thanks to Nicolas Pennec who developed the app we took as an example. He is a JavaScript Expert in ScaleDynamics. He co-organizes RennesJS, a French JavaScript Meetup, so if you come by Brittany you’re more than welcome to join us!

JAMstack best practices: Adding a serverless back-end to Angular

Long Nghiem — Tue, 15 Sep 2020 13:13:02 +0000

JavaScript frameworks, and Angular, in particular, are growing at a very fast pace these days. The latest updated version of Angular offers several benefits such as MVVM, exceptional support for TypeScript, structure, and architecture specifically created for project scalability. What better completes a state-of-the-art Angular front end than a nice serverless back end? We will introduce here a way to perform better and faster with Angular by adding a serverless (FaaS) back-end to it while avoiding to code the HTTP parts on both sides, front and back.

I will show you how to do that with the ScaleDynamics platform — a new approach to serverless — that offers a unique way to code and deploy back-ends on serverless function (FaaS). You can deploy it on any type of public FaaS such as AWS Lambda, GCP functions, or on private clouds.

1. Initialize project

First, we create our main Angular project:

$ npm install -g @angular/cli
$ ng new angular-warp-tuto

2. Set up ScaleDynamics platform server

In our example we will create a basic HTTP server proxy, to do that we will:

Fetch the data from a REST API
Filter the data to avoid to request too much data as client-side
Add random Lego avatars in response to make the rendered page look prettier ;)

To do so, let’s create a server directory at the root of our main project and initialize a new Node.js project inside it:

mkdir angular-warp-tuto/server
cd angular-warp-tuto/server
npm init -y

And then, install the Axios library that we need:

npm install axios

In the server subproject, let’s create an index.js to create back-end serverless function:

// server/index.js
const axios = require(“axios”);
const getUsers = async () => {
 // fetch users from API
 const { data } = await axios.get(“https://jsonplaceholder.typicode.com/users");
// Pick attributes and add photo
 return data.map(({ id, name, email, phone, company, address }) => ({
  id,
  name,
  email,
  phone,
  city: address.city,
  work: company.name,
  photo: “https://randomuser.me/api/portraits/lego/" + (id % 10) + “.jpg”,
 }));
};

Now, this is a very important part, we need to tell the platform to turn function into a serverless function (FaaS) and to host it as a serverless function by doing this:

// getUsers is the function that we will call from the Front-end
module.exports = { getUsers };

You have it done? From now on, we don’t have to deal with HTTP arguments, errors, endpoints… ScaleDynamics will take care of that for us.

Next, to configure the platform, we create a warp.config.js file like this example:

module.exports = {
 // project name in the ScaleDynamics console (demo is created by default)
 project: “demo”,
 output: {
  format: “node-module”,
  // path to the “node_modules” directory of our main project
  projectPath: “../”,
  // module name to import it in our main project
  name: “warp-server”,
 },
};

The ScaleDynamics console will be introduced further regarding the “project” property.

The platform will generate an npm package named warp-server to be used in the client project thanks to the node-module output format. This works as a helper module (a wrapper) to call our server.

3. Set up ScaleDynamics in project

Our server is ready, now we need to set up ScaleDynamics in our project.

ScaleDynamics comes with a command-line interface (CLI) on the server-side to help us start our local emulator, build our project, and deploy it on a cloud. On the client-side, the platform engine and the helper module will prevent us from making HTTP calls and that’s all we need on this side.

Now, get back to the project, we need to install these small dependencies:

cd ..
npm install @warpjs/engine
npm install warp npm-run-all — save-dev

Then, add the server parts in the start and build commands, and the deploy command-line in package.json:

“scripts”: {
+ “postinstall”: “cd ./server && npm install”,
“ng”: “ng”,
- “start”: “ng serve”,
+ “start:client”: “ng serve”,
+ “start:server”: “warp start-emulator -w ./server”,
+ “start”: “run-p start:*”,
- “build”: “ng build”,
+ “build:client”: “ng build — prod”,
+ “build:server”: “warp build ./server”,
+ “build”: “run-s build:server build:client”,
+ “deploy”: “warp deploy — asset-dir dist/angular-warp-tuto ./server”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},

Just one more step before we can run and test our project, we need to import the Warp engine once to call the serverless function in our code.
I recommend to initialize it in the entry point of the main project:

// src/main.ts
import “@warpjs/engine”;

Then, import the npm module to init and call the serverless function. Here’s how it looks like when the serverless back-end is called:

// imports the Warp helper module, to back-end wrapper
import WarpServer from “warp-server”;
// creates an instance of the helper
const { getUsers } = new WarpServer();
// async call to the serverless function
const users = await getUsers();

Everything is all set, you’re free to test your project now 🤞 🙏🏻

4. Run

We need a ScaleDynamics account to run and deploy our project in the cloud. If you do not have one yet, you can request a free trial this link. It’s free and spam-free 😊.

After you get your account, get back to the console to log in:

npx warp login

We can run the project now, this command-line will run a serverless emulator for the back-ends, and will also start a server to serve our Angular front end.

# run a dev server:
npm run start

After that, a browser will pop up with a list of fake users and Lego faces as profile pictures. Do not hesitate to play the front-end or back-end code, both servers will live-reload 😎

Now is the time… The last step: deploy it on a cloud!

ScaleDynamics will deploy the back end on a FaaS platform (GCP functions) and the front-end on a Google storage.

# build and deploy to production
npm run build
npm run deploy

Your project is now ready!

Now, we have our URL, client and server are well hosted. Throughout the process, we did not have to deal with any HTTPs requests, route, security, endpoints, or errors… that gives us a much faster experience, the opportunity to focus on the logic and the UI, and to forget a little about the pipes 🔧

To integrate with other frameworks, you can find a lot of code samples for many use cases in GitHub, I recently recorded a tutorial video for Vue.JS, and you can find step-by-step tutorials for Vue.js and React.

I hope you’ve found this tutorial helpful and if you have any questions, don’t hesitate to leave it in the comment section below 🙂

DEV Community: Long Nghiem

Hack your TensorFlow.js experience to the next level 🚀

TL;DR;

Table of contents

AI in the browser

TensorFlow.js seems easy, but not that easy!

A simple way to use Tensoflow.js right in the browser

In action: Tensorflow.js face detection

In action: Tensorflow.js sound spectrogram

TensorFlow's snippets by use cases

Video feed

Sound feed

Inference

Text classification

Play and learn more effectively on the Playground

📣 FREE Community Plan for JavaScript Dev to develop faster 🚀

Production-grade SDK

JavaScript Full Stack Playground

Start coding in Full Stack today!

Useful code snippets to become Full Stack faster 🚀

Table of content

React based apps

Weather forecasting apps 🌄🌦️☔

Database/Dashboard 📈📊

Tensorflow.js/AI

Hop in, show off your snippets, and inspire others!

4 steps to add a serverless back end to React

1. Initialize project

2. Set up ScaleDynamics server

3. Setup ScaleDynamics in project

4. Run

Your project is now ready!

Credits

JAMstack best practices: Adding a serverless back-end to Angular

1. Initialize project

2. Set up ScaleDynamics platform server

3. Set up ScaleDynamics in project

4. Run

Your project is now ready!

Credits