2023年6月（予定）からは新たに、One to Oneチャットを主に利用することで、ユーザーひとりひとりとの個別コミュニケーションを目的とした「コミュニケーションプラン」、友だち数増加によるユーザー全体への情報発信やリーチを目的とした「ライトプラン」「スタンダードプラン」など、目的別にプランを選択し、ご活用いただくことが可能です。 ※無料メッセージについて 無料メッセージは「メッセージ配信」の通数が対象です。チャットでのメッセージ通数は現プランと同様対象外となり、通数制限はございません。
In a business, when you are developing an application from scratch, it is necessary to understand the standardization, consistency, utilization and scalability of the software. Businesses nowadays are very selective for web stack development, especially while creating professional applications like blogs, web service apps etc.
In this article, we will cover the two important development stacks – LAMP and MEAN. We will uncover the technology used in the database, server environment, and backend language during the development process in these two web stacks.
LAMP Stacks: Definition
In simple terms, the full form of LAMP is Linux, Apache, MySQL and PHP. The LAMP is a set of software and subsystems that can perform tasks without any dependency on any external software and data. The LAMP works in a bunch of software, and it allows smooth integration between each other softwares, which makes it the most suitable platform for web application development.
LAMP stacks have the oldest and largest community and a wide range of libraries and tools. The LAMP stacks could be the best platform for hosting & development of high performing web applications. Its components include.
Linux (Operating System)
Apache (Web Server)
MySQL (Code Managing the Database)
PHP (Programming Language)
The LAMP is used by many popular industry leaders like Oracle, Zenda & Linux and many others. LAMP is highly considered for creating high-end performing enterprise applications.
Pros of LAMP Stacks
The LAMP stacks offers a wide range of support services. PHP and MySQL backend support is provided by many hosting providers.
The LAMP is an open source technology therefore the end-user and source can be changed according to developer needs.
PHP & MySQL are easy to understand, therefore it becomes easier of beginners to adopt this technology.
Cons of LAMP Stacks
The LAMP stack only supports Linux and its variant operating system technology.
Switching between technology like PHP to python is very difficult in LAMP.
MEAN Stacks: Definition
The MEAN contains some software in the bundle known as MongoDB, ExpressJS, AngularJS, and NodeJS. The primary programming language of MEAN stacks is Javascript, and when all these software work together, it makes it easier for developers to build web applications. The database stored all the data in JavaScript Object Notation (JSON) format because every component is written in Javascript language.
MongoDB (data persistence)
Express.js (server-side application framework)
Angular (client-side application)
Node.JS (server-side environment)
The applications developed using MEAN stack technologies are easily scalable, flexible, and extensible. MEAN stacks is an ideal option for cloud application hosting.
Pros of MEAN Stacks
The MEAN stack uses a single programming language – JavaScript, which makes it most preferred sacks among developers. It also allows easily switching between client and server.
Due to its open-source solutions the application developed using MEAN stack technology is easy to maintain and robust.
The MEAN stack offers real time application demonstration. In this modern era the real time app demo can be beneficial for subscribers and users.
The primary advantage of MEAN stack is it allows cloud computing technology. Therefore it makes it easy for various users to access large information at the same time.
Cons of MEAN Stacks
MongoDB is not suitable for large enterprises, because there seems to be large data loss when developers try to accomplish network partitioning.
The Express.Js consider as poor isolation for the server from business logic.
The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface.
“An architectural style where independently deliverable frontend applications are composed into a greater whole”
In ThoughtsWorks — Technology Radar May 2020 Techniques, MFEs are in “Adopt” stage.
We’ve seen significant benefits from introducing microservices, which have allowed teams to scale the delivery of independently deployed and maintained services. Unfortunately, we’ve also seen many teams create a front-end monolith — a large, entangled browser application that sits on top of the back-end services — largely neutralizing the benefits of microservices. Micro frontends have continued to gain in popularity since they were first introduced.
Pros:
Incremental upgrades
Multiple teams contribute to the frontend
Simple & Decoupled codebases
Development speed should be a constant despite a growing application
External developers should be able to extend the UI
Different teams should be able to use their own tooling (Technology Agnostic)
May be you have done Angular vs React vs VueJS but now we talking about — Angular + React +VueJS — how they can work together.
Cons:
Micro frontends are not perfect for every project. They are a solution for scaling development. If you only have a hand full of developers and communication is no issue the introduction of micro frontends won’t bring much value.
Build micro frontends that coexist and can (but don’t need to) be written with their own framework. This allows you to:
Use multiple frameworks on the same page without refreshing the page (React, AngularJS, Angular, Ember, or whatever you’re using)
Write new code, possibly with a new framework, without rewriting your existing app
Lazy load code for improved initial load time.
Micro frontends are indeed quite popular in the e-commerce sector. In 2012 the Otto Group, a Germany based mail order company and one of the world’s largest e-commerce players started to split up its monolith. The Swedish furniture company IKEA and Zalando, one of Europes biggest fashion retailers, moved to this model. Thalia, a German bookstore chain, rebuilt its e-reader store into vertical slices to increase development speed.
But micro frontends are also used in other industries. Spotify organizes itself in autonomous end-to-end teams they call Squads. Canopy, an American tax software startup and the sports streaming service DAZN use micro frontends to build its applications.
Conclusion:
Microfrontends are sections of your UI, often consisting of dozens of components, that use frameworks like React, Vue, and Angular to render their components. Each microfrontend can be managed by a different team and may be implemented using its own framework. It is practical and suggested to use just one framework for all your microfrontends, although you may add additional frameworks when migrating or when experimenting.
We see it as a proven approach that we should be using when it makes sense to do so.
WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web.
WebAssembly is designed to complement and run alongside JavaScript — using the WebAssembly JavaScript APIs, you can load WebAssembly modules into a JavaScript app and share functionality between the two. This allows you to take advantage of WebAssembly’s performance and power and JavaScript’s expressiveness and flexibility in the same apps, even if you don’t know how to write WebAssembly code.
Now, if you have programs in C/C++ or Rust etc. now you can run those programs on the web with help of WebAssembly alongside JavaScript. You can also develop WebAssembly using AssemblyScript (A language made for WebAssembly).
Now these has opened doors for running complex programs written in “low-level assembly-like language” on web.
We are already seeing some interesting use cases of WebAssembly, Like TensorFlow has announced — WebAssembly backend for TensorFlow.js (more details here)
TensorFlow WASM backend Performance dataTensorFlow WASM backend Performance data
One more interesting example of WebAssembly could be — A WebAssembly Powered Augmented Reality Sudoku Solver.
In our example using WebAssembly NES emulator and run Super Mario Brothers and Tetris game in our web browser.
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<style>
canvas {
background: #000;
margin: 10px;
}
.actual {
width: 256;
height: 240;
}
.double {
width: 512;
height: 480;
}
.quadruple {
width: 1024;
height: 960;
}
td {
padding: 5px;
}
</style>
</head>
<body>
<script type="module">
import init, { WasmNes, Button } from './nes_rust_wasm.js';
const setupAudio = (wasm, nes) => {
const audioContext = AudioContext || webkitAudioContext;
if (audioContext === undefined) {
throw new Error('This browser seems not to support AudioContext.');
}
const bufferLength = 4096;
const context = new audioContext({sampleRate: 44100});
const scriptProcessor = context.createScriptProcessor(bufferLength, 0, 1);
scriptProcessor.onaudioprocess = e => {
const data = e.outputBuffer.getChannelData(0);
nes.update_sample_buffer(data);
// Adjust volume
for (let i = 0; i < data.length; i++) {
data[i] *= 0.25;
}
};
scriptProcessor.connect(context.destination);
};
const start = romArrayBuffer => {
// @TODO: Call init beforehand
init()
.then(wasm => run(wasm, new Uint8Array(romArrayBuffer)))
.catch(error => console.error(error));
};
const run = (wasm, romContentArray) => {
const width = 256;
const height = 240;
const canvas = document.getElementById('nesCanvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(width, height);
const pixels = new Uint8Array(imageData.data.buffer);
const nes = WasmNes.new();
nes.set_rom(romContentArray);
setupAudio(wasm, nes);
nes.bootup();
// FPS counter
let totalElapsedTime = 0.0;
let previousTime = performance.now();
let frameCount = 0;
const fpsSpan = document.getElementById('fpsSpan');
const countFps = () => {
frameCount++;
const currentTime = performance.now();
const elapsedTime = currentTime - previousTime;
totalElapsedTime += elapsedTime;
previousTime = currentTime;
if ((frameCount % 60) === 0) {
fpsSpan.textContent = (1000.0 / (totalElapsedTime / 60)).toFixed(2);
totalElapsedTime = 0.0;
frameCount = 0;
}
}
// animation frame loop
const stepFrame = () => {
requestAnimationFrame(stepFrame);
countFps();
nes.step_frame();
nes.update_pixels(pixels);
ctx.putImageData(imageData, 0, 0);
};
// joypad event listener setup
// @TODO: Mapping should be configurable
const getButton = keyCode => {
switch (keyCode) {
case 32: // space
return Button.Start;
case 37: // Left
return Button.Joypad1Left;
case 38: // Up
return Button.Joypad1Up;
case 39: // Right
return Button.Joypad1Right;
case 40: // Down
return Button.Joypad1Down;
case 50: // 2
return Button.Joypad2Down;
case 52: // 4
return Button.Joypad2Left;
case 54: // 6
return Button.Joypad2Right;
case 56: // 8
return Button.Joypad2Up;
case 65: // A
return Button.Joypad1A;
case 66: // B
return Button.Joypad1B;
case 82: // R
return Button.Reset;
case 83: // S
return Button.Select;
case 88: // X
return Button.Joypad2A;
case 90: // Z
return Button.Joypad2B;
default:
return null;
}
};
window.addEventListener('keydown', event => {
const button = getButton(event.keyCode);
if (button === null) {
return;
}
nes.press_button(button);
event.preventDefault();
}, false);
window.addEventListener('keyup', event => {
const button = getButton(event.keyCode);
if (button === null) {
return;
}
nes.release_button(button);
event.preventDefault();
}, false);
stepFrame();
};
// rom load
let romSelected = false;
document.getElementById('romSelect').addEventListener('change', event => {
if (romSelected) return;
romSelected = true;
const select = event.target;
const option = select.selectedOptions[0];
const filename = option.value;
if (!filename) {
return;
}
select.disabled = true; // @TODO: Reset Nes instead
fetch('./' + filename)
.then(result => result.arrayBuffer())
.then(start)
.catch(error => console.error(error));
});
window.addEventListener('dragover', event => {
event.preventDefault();
}, false);
window.addEventListener('drop', event => {
event.preventDefault();
if (romSelected) return;
romSelected = true;
document.getElementById('romSelect').disabled = true; // @TODO: Reset Nes instead
const reader = new FileReader();
reader.onload = e => {
start(e.target.result);
};
reader.onerror = e => {
console.error(e);
};
reader.readAsArrayBuffer(event.dataTransfer.files[0]);
}, false);
// screen size
document.getElementById('screenSizeSelect').addEventListener('change', event => {
const select = event.target;
const option = select.selectedOptions[0];
const className = option.value;
if (!className) {
return;
}
const canvas = document.getElementById('nesCanvas');
for (const name of ['actual', 'double', 'quadruple']) {
if (name === className) {
canvas.classList.add(name);
} else {
canvas.classList.remove(name);
}
}
});
</script>
<div>
<select id="romSelect">
<option value="" selected>-- select rom --</option>
<option value="Super_mario_brothers.nes">Super Mario</option>
<option value="Tetris.nes">Tetris</option>
</select>
or Drag and Drop your own rom file
</div>
<div>
<canvas id="nesCanvas" width="256" height="240"></canvas>
</div>
<div>
<select id="screenSizeSelect">
<option value="actual" selected>256x240</optioin>
<option value="double">512x480</optioin>
<option value="quadruple">1024x960</optioin>
</select>
<span id="fpsSpan">--.--</span> fps
</div>
<div>
<table>
<tr>
<td>Down →</td>
<td>Down</td>
</tr>
<tr>
<td>Left →</td>
<td>Left</td>
</tr>
<tr>
<td>Right →</td>
<td>Right</td>
<!-- <td>6</td> -->
</tr>
<tr>
<td>Up →</td>
<td>Up</td>
<!-- <td>8</td> -->
</tr>
<tr>
<td>A →</td>
<td>A</td>
<!-- <td>X</td> -->
</tr>
<tr>
<td>B →</td>
<td>B</td>
<!-- <td>Z</td> -->
</tr>
<tr>
<td>Start →</td>
<td>Space</td>
<!-- <td>-</td> -->
</tr>
<tr>
<td>Select →</td>
<td>S</td>
<!-- <td>-</td> -->
</tr>
<tr>
<td>Reset →</td>
<td>R</td>
<!-- <td>-</td> -->
</tr>
</table>
</div>
<div>
<p>NES Roms Copyright
<a href="https://github.com/takahirox/nes-rust">NES emulator in Rust</a></p>
</div>
</body>
</html>
4. Open our “rust_wasm_demo.html” in browser.
Press “Space” to Start, Press “R” to Reset
Conclusion:
WebAssembly brings the performance of native applications to the web in a way that’s completely secure, yet enabling a full functionality expected from games, major applications and the entire spectrum of software you can run on a computer. WebAssembly is just built as a binary format and very compact to download, and also very efficient to compile and execute. There’s a whole bunch of optimizations coming that will drive that even further, allowing huge mobile applications to load up quickly, even on mobile devices.
