Ниже я расскажу о некоторых из них и предоставлю примеры кода.
PWA (Progressive Web Apps)
Progressive Web Apps – это веб-приложения, которые выглядят и работают, как нативные, но в то же время они запускаются в браузере.
PWA имеют множество преимуществ, включая высокую скорость работы, отзывчивость и возможность работы в автономном режиме.
Вот пример кода для создания PWA:
// Регистрация Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
// Добавление приложения на домашний экран
if (window.matchMedia('(display-mode: standalone)').matches) {
console.log('Web application is already installed as a PWA');
} else {
console.log('Web application is not installed as a PWA yet');
const addButton = document.querySelector('#add-to-home-screen');
addButton.style.display = 'block';
addButton.addEventListener('click', function() {
const installPromptEvent = window.deferredPromptEvent;
if (installPromptEvent) {
installPromptEvent.prompt();
installPromptEvent.userChoice.then(function(choiceResult) {
console.log('User choice:', choiceResult.outcome);
});
window.deferredPromptEvent = null;
}
});
}
SPA (Single Page Applications)
Single Page Applications – это веб-приложения, которые загружаются один раз, и после этого все действия пользователя осуществляются без перезагрузки страницы.
SPA часто используются для создания социальных сетей, мессенджеров и других приложений, которые должны работать быстро и плавно.
Вот пример кода для создания SPA с использованием фреймворка React:
import React, { useState } from 'react';
function App() {
const [counter, setCounter] = useState(0);
function handleIncrement() {
setCounter(counter + 1);
}
return (
<div>
<h1>Counter: {counter}</h1>
<button onClick={handleIncrement}>Increment</button>
</div>
);
}
export default App;
SSR (Server-Side Rendering)
Server-Side Rendering – это технология, которая позволяет генерировать HTML-код на сервере и отправлять его клиенту.
Это уменьшает время загрузки страницы и улучшает SEO-оптимизацию.
Вот пример кода для создания SSR с использованием фреймворка Next.js:
import { GetServerSideProps } from 'next';
function Home(props) {
return (
{props.title}
{props.description}
);
}
export const getServerSideProps: GetServerSideProps = async (context) => {
return {
props: {
title: 'Welcome to my website',
description: 'This is a server-side rendered website',
},
};
};
export default Home;
JAMstack (JavaScript, APIs, Markup)
JAMstack – это подход к веб-разработке, который основывается на использовании статических сайтов, API и JavaScript.
Этот подход позволяет создавать быстрые и безопасные сайты, которые легко масштабировать и поддерживать.
Вот пример кода для создания JAMstack-сайта с использованием фреймворка Gatsby:
import React from 'react';
import { graphql } from 'gatsby';
function IndexPage(props) {
return (
{props.data.site.siteMetadata.title}
{props.data.site.siteMetadata.description}
);
}
export const query = graphql`
query {
site {
siteMetadata {
title
description
}
}
}
`;
export default IndexPage;
Это лишь некоторые примеры из множества подходов и технологий, которые используются в современной веб-разработке. В зависимости от конкретного проекта и его требований, можно выбрать наиболее подходящие инструменты и технологии для реализации веб-приложения.
