Результати пошуку за запитом: design pattern
Як створити веб-сайт за допомогою AJAX
Автор: Редакция ITVDN
Создания простого чата
Для начала создадим простой чат с помощью HTML&CSS и PHP&MySQL
Проектирование Базы Данных
Переходим к phpMyAdmin.
Создаем новую базу данных, называем “chatdb”.
Создаем новую таблицу, называя “Posts”, включая в себя 4 столбца:
“id” тип колонки INT, автоматическое увеличение на 1 (задаем A_I в ячейку с флажком) основной ключ (index);
“nick” тип колонки VARCHAR и длина 100;
“post_text” тип колонки TEXT;
“post_dt” тип колонки DATETIME по умолчанию является CURRENT_TIMESTAMP.
Создание веб-сайта.
Во-первых, создадим главную страницу. Список комментариев и отправка формы, используя кнопку. Всё будет находится в файле “index.php” . Давайте создадим этот файл и напишем что-то вроде этого:
<html>
<head>
head>
<body>
php
$mysqli = new mysqli("127.0.0.1", "root", "", "chatdb");
/* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */
/* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */
/* "chatdb" is DB's name. */
/* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */
$result = $mysqli->query("SELECT * FROM posts;");
?>
<style>
/* All CSS is very simplified. I provide it for example and no more.
* In Chrome it works tolerably, but in IE and Firefox it works very poorly.
*/
.content {
display: table;
width: 50%;
min-width: 400px;
height: 80%;
/* Center horizontally and vertically */
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
/* Design */
border: 1px solid;
background-color: silver;
padding: 5px;
}
/* For mobile devices */
@media (max-width: 400px) {
.content {
width: 100%;
min-width: 0;
padding: 0px;
}
}
style>
<div class="content">
<div id="comments" style="overflow-y: scroll; height: 100%;">
php
if ($result) {
while ($post = $result->fetch_object()){
$nick = $post->nick;
$post_dt = $post->post_dt;
$post_text = $post->post_text;
echo "<b>$nickb> ($post_dt):<br>";
echo "$post_text<br>";
echo "<br>";
}
$result->close();
}
?>
div>
php
$mysqli->close();
?>
<form action="post.php" method="post" style="height: 0; display: table-row;">
Nick:<br>
<input type="text" name="nick" style="width: 100%;">input><br>
<br>
Text:<br>
<textarea name="text" style="width: 100%;">textarea><br>
<br>
<input type="submit">input>
form>
div>
<script type="text/javascript">
var divComments = document.getElementById('comments');
divComments.scrollTop = divComments.scrollHeight;
script>
body>
html>
2. Дальше давайте создадим “post.php” файл и напишем такое:
php
$nick = $_POST['nick'];
$post_text = $_POST['text'];
$mysqli = new mysqli("127.0.0.1", "root", "", "chatdb");
$nick = $mysqli->real_escape_string($nick);
$nick = htmlspecialchars($nick);
$post_text = $mysqli->real_escape_string($post_text);
$post_text = htmlspecialchars($post_text);
$mysqli->query("INSERT INTO posts (nick, post_text) VALUES ('$nick', '$post_text');");
$mysqli->close();
/* Redirect To Main Page */
header('Location: ' . $_SERVER['HTTP_REFERER']);
?>
3. Откроем ваш чат в любом продвинутом браузере. Вся работа:
4. Напишите ник и текст, а потом нажмите на кнопку отправки.
Когда отправили форму, сразу же происходит перенаправление формы главной страницы в “post.php”. “Post.php” моментально наполняет данными таблицу и перенаправляет на главную страницу. Также “post.php” содержит начальный XSS и SQL защищенный вход. Для упрощения не отправляем клиентам время с JS на “post_dt” на внесения данных, а указываем значение по умолчанию – CURRENT_TIMESTAMP, который предоставляет нынешнюю дату и время на сервер.
Когда количество комментариев больше, чем экран может вместить, то комментарии переполнены в div, используется вертикальный скроллбар. Во время загрузки страницы JS автоматически опускает скроллбар вниз к недавнему комментарию.
Что тут не так?
Проблема номер 1. Новый непрочитанный комментарий от пользователя не загружается в базу данных автоматически, без ручной перезагрузки страницы.
Это очень, очень серьезная проблема для любого чата.
Как это исправить?
Очевидно, один из путей сделать это - использовать HTTP-запрос к фоновой работе автоматически (с помощью JS) и асинхронно, то есть это один из способов обеспечить выполнение AJAX в любой form.
Проблема номер 2. Также неправильно то, что кнопка отправки перезагружает страницу (перенаправляет на вторую страницу и следующим шагом возвращает назад).
При перезагрузке страницы сбрасывает “Nick” в поле (также, как любые другие изменения, те, что сделали с пользователем)
Как это исправить?
Конечно, можно обеспечить выполнение обхода для сохранения изменений и перезагрузки на перезагружаемой странице. Но не эффективнее ли устранить причину, чем последствие? Можно только убрать перезагружаемую страницу и эта проблема будет решена автоматически.
Проблема номер 2.1. Видите ли что-то необычное тут?
Это слишком быстро?
Дело с чатом очень простое – загружаем только два маленьких текстовых параметра. Что делать, если нужно улучшить чат с помощью добавления присоединения, а конкретно - изображений и видео? Видео может иметь объем в размере нескольких мегабайт, что тогда в этом случае?
Давайте попробуем. Давайте немного изменим “post.php”, после $mysql->query() добавив это:
for ($i = 0; $i < 1000000000; $i++) { }
Старайтесь размещать какие-либо комментарии. Что мы видим? Нет, UI не остановилось (заморозилось), но браузер ждет до того, как закончится подключение:
Да, если “post.php” вызывает какую-то необработанную ошибку, то чат исчезает, и пользователь видит пустое окно с сообщением о непонятной ошибке. Чтобы вернуться к чату, пользователю стоит нажать кнопку “Back” в браузере. И это проблема номер 2.2.
Давайте уберем петлю с “post.php” и исправим эти проблемы.
Реализация легкого AJAX в простой чат
Автоматическое обновление комментариев
Эта веб-страница без AJAX? Это веб-страница, которая полностью перезагружается.
Эта веб-страница c AJAX? Это веб-страница, что перезагружается частично.
Где же взять части этих страниц? Стоит разделить нашу страницу на части, в этом случае сервер генерирует страницу частично.
Страница будет состоять из двух частей – блок комментариев и другой контент страницы. Комментарии будут загружаться и перезагружаться отдельно от другой страницы.
Давайте сделаем первую часть, то есть блок комментариев.
Для начала создадим пустой файл, назовем “getcomment.php”.
Дальше переходим в “index.php” для того, чтобы вырезать комментарии и далее отделить его.
1. Вырезаем инициализированный блок MySQL с “index.php"
php
$mysqli = new mysqli("127.0.0.1", "root", "", "chatdb");
/* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */
/* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */
/* "chatdb" is DB's name. */
/* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */
$result = $mysqli->query("SELECT * FROM posts;");
?>
вставляем в “getcomments.php”.
2. Следующее, вырежем контент div c комментариями с “index.php”:
php
if ($result) {
while ($post = $result->fetch_object()){
$nick = $post->nick;
$post_dt = $post->post_dt;
$post_text = $post->post_text;
echo "<b>$nickb> ($post_dt):<br>";
echo "$post_text<br>";
echo "<br>";
}
$result->close();
}
?>
И вставим (добавим) в “getcomments.php” после инициализации MySQL.
3. Дальше, вырежем недалекий блок MySQL с “index.php”:
php
$mysqli->close();
?>
Вставим его в конец файла “getcomments.php”.
4. Наконец-то, убираем JS-скрипт, который опускает скролл в самый низ.
<script type="text/javascript">
var comments = document.getElementById('comments');
comments.scrollTop = comments.scrollHeight;
script>
Не переживай, это только временно.
5. Сделано. Теперь имеем что-то наподобие этого:
<html>
<head>
head>
<body>
<style>
/* All CSS is very simplified. I provide it for example and no more.
* In Chrome it works tolerably, but in IE and Firefox it works very poorly.
*/
.content {
display: table;
width: 50%;
min-width: 400px;
height: 80%;
/* Center horizontally and vertically */
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
/* Design */
border: 1px solid;
background-color: silver;
padding: 5px;
}
/* For mobile devices */
@media (max-width: 400px) {
.content {
width: 100%;
min-width: 0;
padding: 0px;
}
}
style>
<div class="content">
<div id="comments" style="overflow-y: scroll; height: 100%;">
div>
<form action="post.php" method="post" style="height: 0; display: table-row;">
Nick:<br>
<input type="text" name="nick" style="width: 100%;">input><br>
<br>
Text:<br>
<textarea name="text" style="width: 100%;">textarea><br>
<br>
<input value="Submit" type="submit">input>
form>
div>
body>
html>
getcomments.php:
php
$mysqli = new mysqli("127.0.0.1", "root", "", "chatdb");
/* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */
/* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */
/* "chatdb" is DB's name. */
/* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */
$result = $mysqli->query("SELECT * FROM posts;");
?>
Вероятно, теперь наша страница разделена.
Давайте проверим её. Переходим http (точнее ССЫЛКА для локального сервера).
Дальше, переходим на главную страницу, http:///index.php
Это удивительно! Всё удачно получилось, разделив страницу на части за пару минут!
Не останавливаемся на этом. Теперь “glue” эти части с помощью AJAX. Как это сделать?
1. Для начала стоит создать пустой JS-скрипт на главной странице:
<script type="text/javascript">
alert('Test');
script>
Добавив это после тега div, перед закрывающимся тегом .
2. Сделаем HTTP GET запрос от JS к “getcommet.php”
Для этого используем XMLHtttpRequest (XHR) класс:
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getcomments.php', false);
xhr.send(null);
if (xhr.status == 200) {
alert(xhr.responseText);
}
script>
Это работает, но не читает старые версии IE те, что не поддерживают такую инициализацию.
Для получения более кросс-браузерного пути переходим в
и добавляем это:
<script type="text/javascript">
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
};
script>
И главный скрипт (в конце)
<script type="text/javascript">
var xhr = getXmlHttp();
xhr.open('GET', '/getcomments.php', false);
xhr.send(null);
if (xhr.status == 200) {
alert(xhr.responseText);
}
script>
Как видно, теперь JS получает контент со страницы “getcomments.php” и показывает это в предупреждении.
2.1. Вопрос: «Это на самом деле AJAX (Asynchronous Javascript And Xml)?»
Это AJAX, потому что запрос сервера отформатирован в HTML (который основан на XML).
Но действительно ли это AJAX, это асинхронно?
Проверим. Добавим эти уже знакомые строки в любое место между в “getcomments.php”:
for ($i = 0; $i < 1000000000; $i++) { }
Что теперь видно на загружаемой странице?
Вначале страница зависает, его замораживает UI (становится не реагирующим на нажатие левой/правой кнопки мыши):
Дальше Chrome показывает навязчивое всплывающие окно, сообщающее об удалении страницы:
Это не AJAX! Это JAX! Как его сделать асинхронным?
К счастью, ХHR также поддерживает асинхронный режим:
<script type="text/javascript">
var xhr = getXmlHttp();
xhr.open('GET', '/getcomments.php', true); /* true for asynchronous */
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if(xhr.status == 200) {
alert(xhr.responseText);
}
}
};
xhr.send(null);
script>
В этом случае браузер не ждет ответа с главного потока пользовательского интерфейса, он запускает в другом (асинхронно) и вызываемым событием “onreadystatechange” в главном контексте UI.
Теперь всё в порядке, страница полностью доступна, пока запрос запущен, и после ответа получит предупреждение.
for ($i = 0; $i < 1000000000; $i++) { }
И продолжаем работу.
3. Добавляем этот контент в div вместо предупреждения. Заменить это:
alert(xhr.responseText);
C этим:
var divComments = document.getElementById('comments');
divComments.innerHTML = xhr.responseText;
Возвращаем назад, клиент видит “glued” страницу с блоком комментариев.
4. Дальше следует установить интервал для автоматической проверки новых комментариев время от времени… и также восстановить удаленный сценарий автоматической прокрутки.
<html>
<head>
<script type="text/javascript">
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
};
script>
head>
<body>
<style>
/* All CSS is very simplified. I provide it for example and no more.
* In Chrome it works tolerably, but in IE and Firefox it works very poorly.
*/
.content {
display: table;
width: 50%;
min-width: 400px;
height: 80%;
/* Center horizontally and vertically */
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
/* Design */
border: 1px solid;
background-color: silver;
padding: 5px;
}
/* For mobile devices */
@media (max-width: 400px) {
.content {
width: 100%;
min-width: 0;
padding: 0px;
}
}
style>
<div class="content">
<div id="comments" style="overflow-y: scroll; height: 100%;">
div>
<form action="post.php" method="post" style="height: 0; display: table-row;">
Nick:<br>
<input type="text" name="nick" style="width: 100%;">input><br>
<br>
Text:<br>
<textarea name="text" style="width: 100%;">textarea><br>
<br>
<input value="Submit" type="submit">input>
form>
div>
<script type="text/javascript">
var divComments = document.getElementById('comments');
function loadComments() {
var xhr = getXmlHttp();
xhr.open('GET', '/getcomments.php', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseText !== divComments.innerHTML) {
divComments.innerHTML = xhr.responseText;
divComments.scrollTop = divComments.scrollHeight;
}
}
}
};
xhr.send(null);
};
loadComments();
setInterval(loadComments, 1000)
script>
body>
html>
Теперь проблема исправить это. Новые комментарии с другого пользовательского чата (другие вкладки браузеров, окон и экземпляров) получают каждые 1000 миллисекунды (1 секунду) автоматически.
Но отправка комментариев уже вызывает перезагрузку нашей страницы.
Отправка комментариев без перезагрузки
Как написано выше, XHR помогает отправлять HTTP GET-запросы без перезагрузки страницы и GUI заморозки (асинхронно).
Теперь отправляем HTTP-запрос асинхронно, но на этот раз POST запрос, а не GET.
И, естественно, XHR позволяет это. Используем метод send(). Для GET указываем null. Для POST устанавливаем запрос “body”.Также нужно добавить “Content-Type:application/x-www-from-urlencoded” в header для того, чтобы разрешить серверу знать, какой формат использовать для отправки данных.
Заметка: если не знаете, что отправлять, то можно захватить регулярный запрос с помощью “Fiddler” или же любой другой HTTP-перехватчик и только просимулировать запрос. HTTP-перехватчик — это незаменимый инструмент для работы с HTTP/HTTPS. Это позволяет увидеть все headers и bodies по всем HTTP(S)-запросам, что отправляются в систему. Лучше использовать “Fiddler”, это бесплатное, современное и очень простое приложение, что может поддерживать HTTP/HTTPS и оба Win x86/x64.
1. Для начала создадим пустой JS скрипт в HTML. Разместить до самого
тега, потому что этот скрипт будет использован для отправки формы комментария (форма будет вызывать этот скрипт при отправке).2. В этом скрипте, реализуем функцию, что будет отправлять ник и комментарии в “post.php”
<script type="text/javascript">
function postComment(nick, text) {
var xhr = getXmlHttp();
xhr.open('POST', '/post.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
/* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */
}
}
};
xhr.send('nick=' + nick + '&text=' + text); /* joining the data in format simulates form */
};
script>
3. Следующие, перезагружая страницу при отправке:
... onsubmit="return false;">
Также добавим вызов “postComment’s”:
action="post.php" method="post" style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;">
4. Наконец, необязательно, но можно убрать “action” и “method” с формы:
<form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;">
5. Результат:
<html>
<head>
<script type="text/javascript">
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
};
script>
head>
<body>
<style>
/* All CSS is very simplified. I provide it for example and no more.
* In Chrome it works tolerably, but in IE and Firefox it works very poorly.
*/
.content {
display: table;
width: 50%;
min-width: 400px;
height: 80%;
/* Center horizontally and vertically */
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
/* Design */
border: 1px solid;
background-color: silver;
padding: 5px;
}
/* For mobile devices */
@media (max-width: 400px) {
.content {
width: 100%;
min-width: 0;
padding: 0px;
}
}
style>
<div class="content">
<div id="comments" style="overflow-y: scroll; height: 100%;">
div>
<script type="text/javascript">
function postComment(nick, text) {
var xhr = getXmlHttp();
xhr.open('POST', '/post.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
/* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */
}
}
};
xhr.send('nick=' + nick + '&text=' + text);
};
script>
<form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;">
Nick:<br>
<input type="text" name="nick" style="width: 100%;">input><br>
<br>
Text:<br>
<textarea name="text" style="width: 100%;">textarea><br>
<br>
<input value="Submit" type="submit">input>
form>
div>
<script type="text/javascript">
var divComments = document.getElementById('comments');
function loadComments() {
var xhr = getXmlHttp();
xhr.open('GET', '/getcomments.php', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseText !== divComments.innerHTML) {
divComments.innerHTML = xhr.responseText;
divComments.scrollTop = divComments.scrollHeight;
}
}
}
};
xhr.send(null);
};
loadComments();
setInterval(loadComments, 1000)
script>
body>
html>
Теперь простая реализация AJAX подошла к концу. Это ещё не конец, это только начало. Есть ещё достаточно всего для изучения и улучшения.
Коли потрібно переходити на ASP.NET Core?
Автор: Steven Smith
Прошло много времени с момента релиза ASP.NET Core 1.0. Затем появились версии 1.1, 2.0… В общем и целом серверные компоненты и технология оказались достаточно качественными, в них было замечено всего лишь несколько багов. Кроме того, начиная с вышеупомянутой версии 1.1, было добавлено бессчётное множество различных полезных примочек к Entity Framework Core и самой ASP.NET Core. Помимо прочего, стоит также отметить радикальные отличия в структуре проектов, которые могут показаться слегка непривычными, но являются жизненно необходимыми для взаимодействия проектов .Net Core с другими типами проектов. Но ожиданиям качественного инструмента пришел конец. Произошел релиз Visual Studio 2017, и она успела зарекомендовать себя как достаточно стабильная версия. К тому же я без проблем сумел перенести мои проекты на базе project.json в новый формат файлов MSBuild без всяких проблем. Помимо прочего, стоит также отметить целую серию приятных улучшений стандартной среды языка .NET. Мы долго ждали и дождались – наконец-то стандарт .NET Core (вместе с технологией ASP.NET Core) успешно захватывает IT-рынок и обладает целым рядом полезных инструментов для разработки. Если вы из компании, которая от стольких лет ожидания успела натереть себе мозоль – определенно, вам есть чему радоваться.
Итак, ASP.NET Core сейчас уже на полках. Так в каких случаях нам стоит забыть про старый добрый ASP.NET и опробовать его кроссплатформенную версию? Позволю себе поделиться мнением.
Новые проекты
Если вы начинаете разработку нового проекта с использованием MVC-подхода и/или Web API, вам определенно нужно обратить свое внимание на ASP.NET Core. Технология содержит в себе целую серию значительных улучшений, которые заметно отличают ее от предшественницы. Помимо прочего, она также может похвастаться первоклассной системой внедрения зависимостей. ASP.NET Core также обладает специальными tag-helper`ами. Используя сервис TestServer, вы запросто сумеете производить локальные тесты прямо на свое ПК (забудьте про падения через неверную конфигурация фаервола). Web API теперь внедрены в ASP.NET Core MVC, потому теперь нет никакой необходимости использовать сторонние библиотеки с кучей дублирующих компонентов. Также скорость работы значительно выше, плюс, помимо прочего, арсенал может похвастаться значительно большим количеством опций, нежели MVC5/WebAPI2, который в значительной мере привязан к IIS.
Но что, если проект имеет среди зависимостей сторонние библиотеки (собственные или чьи-то еще), которые требуют полноценной среды .NET Framework, не включенной в .NET Core?
Нет никаких проблем. При желании в ASP.NET Core можно включить полноценный .NET Framework. Желаете использовать ваш Entity Framework 6 или NHibernate для работы с данными? Да ради Бога. Все прекрасно будет работать и в ASP.NET Core. Единственное, что вы от этого утратите – это кроссплатформенность, ибо эти сервисы могут быть запущены только в рамках Windows-сервера.
У меня нет времени переучивать команду на ASP.NET Core!
На счастье, переход на новую платформу не займет много времени, если ваша команда уже знакома с ASP.NET MVC и/или Web API. Концепция Core – использовать все, что было раньше, но значительно лучше. Контроллеры и представления никуда не делись. Представления все еще используют Razor. Маршрутизация по сути своей осталась прежней – она даже стала немного проще. Фильтры также особо не изменились, а Web API добавили своего удобства в использовании (так как они были интегрированы в MVC). Конечно, отличия все же есть, но это не критично. Несколько новых вещей, вроде того, как запускается приложение или как работает middleware, выучить придется, но в целом опыт работы на предыдущей ASP.NET Core MVC тут будет решать очень многое.
Я хочу поместить приложение в контейнер на Linux!
Тогда вы можете желать только ASP.NET Core. Вы не сможете использовать библиотеки из среды .NET Framework, но что касательно стандартных компонентов .NET Core – полный вперед. И да, вы также можете помещать свои приложения под Azure на Linux.
Судьба приложений на ASP.NET MVC 5 и/или Web API 2
Предугадать тут что-либо конкретное будет несколько затруднительно. Если эти приложения работают и запускаются без проблем, не думаю, что необходимость переходить под ASP.NET Core такая уж срочная. Однако, несколько причин, по которым стоит интегрировать подобные программы под ASP.NET Core, все же есть:
Сама поддержка. Если вы бы хотели деплоить приложение и его сервер вместе, без привязки к IIS – Core, – это однозначно ваш выбор.
Поддержка различных платформ. Порой использование Windows-ориентированных серверов может быть дороже прочих других. Возможно, вы могли слышать об поддержке контейнеров, Докера и так далее. Core все это поддерживает – причем на очень даже приличном уровне.
Множественные приложения. Приходилось ли вам запускать несколько экземпляров приложения на одной и той же машине? ASP.NET Core позволит это делать значительно удобнее и эффективнее, нежели традиционный ASP.NET.
Тестирование и Domain-Driven Design (DDD). Если ваша команда следует этому подходу, пишет тестируемое программное обеспечение, то ASP.NET Core (и Entity Framework Core) привнесёт целый ряд полезных фич, которые значительно могут упростить жизнь.
Программы Web Forms
Если ваше приложение базируется на веб-формах, возможно, вам лучше всего будет оставаться на ASP.NET. Microsoft активно инвестирует в эту технологию. Существует множество способов улучшить качество кода, используя внедрение зависимостей и прочее. Но смена платформы на ASP.NET Core MVC будет такой же «болезненной», как и переход на ASP.NET MVC 5,4,3,2,1. Что хуже, используя MVC 5, вы можете запускать страницы отдельно друг от друга, но проделать подобное с ASP.NET Core не представляется возможным. Лично я могу посоветовать оставаться на веб-формах до тех пор, пока приложение не потребует полноценной замены. В плане нагрузки на данные, потребовалось бы применить стиль SPA-приложений со значительно большим количеством клиентского кода и фрейморков типа Angular 2, или React.
Другие размышления
Хотя Visual Studio – прекрасный инструмент для разработки приложений, эта среда не бесплатная (за исключением комьнити-версии). Помимо прочего, она Windows-ориентированная (да, есть VS для MacOS, но это совершенно другое приложение). Если же студия для вас по причине цены или размеров неприемлема, .NET Core будет воистину полезным приобретением. Вы можете на MacOS, Linux (и, разумеется, под Windows) работать в Visual Studio Code!
Подобным образом, если ваши приложения больше ориентированы на клиентскую часть, ASP.NET Core порадует более облегченными размерами. В то время, как фронтендеры превозносят NodeJS как быструю технологию (и ее возможность исполнять js-код на сервере), ASP.NET Core может также исполнять Node.JS на сервере (и вы также можете работать под JS на сервере, если вам захочется). Используя TechEmpower, ASP.NET Core, развернутый с использованием Kestrel, может обрабатывать до 1 миллиона запросов за секунду на том же ПК и в рамках того же приложения, в то время, как NodeJS обрабатывает всего около 175 тысяч в секунду.
Подведем итоги
Безусловно, ваш опыт и ваше мнение может сильно отличаться от моего, потому вопрос о том, стоит ли переходить на ASP.NET Core для некоторых может остаться открытым. И, конечно, ASP.NET Core далеко не единственная технология, используя которую вы будете создавать свое следующее веб-приложение. Однако, тема этой статьи как раз-таки ASP.NET Core, с которым мне приходилось долго проработать. К тому же, написано очень много официальной документации на официальном сайте Microsoft. Я не советую переходить на ASP.NET Core лишь потому, что он такой новый и весь из себя красивый. Решение перейти должно быть тщательно взвешенным и подкрепленным весомыми аргументами, которые я постарался привести в своей статье.
Что дальше?
Разработка ASP.NET Core продолжается. Уверен, версия 2.0 – далеко не последняя! Было бы неплохо взглянуть на обновленный SignalR и новую функциональность разор-страниц.
Автор перевода: Евгений Лукашук
Оригинал статьи
Розгортання ASP.NET MVC Web Site на Microsoft Azure
Автор: Редакция ITVDN
Введение
Microsoft Azure является облачно-вычислительной платформой и инфраструктурой, предоставленной корпорацией Microsoft. Эта платформа выполняет такие функции, как построение, развертывания и управления приложениями и услугами, и они могут быть доступны по всему миру. Azure доступен как Платформа, как сервис (PaaS) и Инфраструктура, как сервис (IaaS).
Чтобы сделать развертывание приложения.NET на Microsoft Azure, Visual Studio 2012 и Visual Studio 2013 предоставляет Вам необходимые инструменты. Вы можете загрузить полную версию Visual Studio 2013 года здесь. Чтобы использовать Azure, сначала нужно посетить сайт manage.windowsazure.com и подписаться на эту услугу. Вы также можете получить бесплатную пробную подписку, чтобы начать работу. После входа на портал, на следующем рисунке продемонстрированы некоторые службы/функции, которые можно получить:
В этой статье мы будем использовать приложение, созданное с помощью Angular.js, MVC, WEB API для выполнения CRUD-операций. Мы будем публиковать приложения на Azure в качестве веб-сайта. Загрузите исходный код и откройте это приложение в Visual Studio 2013.
Создание сервера базы данных с помощью SQL Azure
Чтобы успешно запустить веб-сайт, Вы должны развернуть базу данных, используемую нашим веб-сайтом в облаке. Чтобы развернуть базу данных Azure, нужно создать сервер базы данных, используя Azure SQL.
Шаг 1: Выберите SQL DATABASES, и Вы увидите страницы базы данных, как показано здесь:
Выберите Servers, это позволит создать новую базу данных SQL SERVER. Нажмите кнопку "CREATE A SQL SERVER DATABASE", ниже появится окно:
Введите необходимые данные. После ввода данных выберите галочку в нижнем углу, чтобы создать базу данных сервера:
Кликаем на кнопку "MANAGE" внизу страницы, это позволит Вам добавить сервер доступа в правила брандмауэра, так чтоб был получен доступ к приложению. Эти правила добавят IP-адрес вашей машины в правила брандмауэра. Чтоб узнать имя экземпляра сервера базы данных, кликаем по имени базы данных для отображения информационной панели. Прокрутите вниз страницы панели мониторинга для отображения MANAGE URL. Она начинается от https://.database.windows.net. Часть URL после https://, имя экземпляра базы данных.
Шаг 2: Чтобы Соединиться с сервером базы данных, скопируйте часть URL после http://, и от локального экземпляра SQL Server, кликаем по Connect на объектном проводнике, и в Connect To Server окно вводит детали базы данных как показано здесь:
Это выведет на экран Сервер базы данных Azure SQL экземпляр в объектном проводнике на локальном экземпляре SQL Server.
Введите необходимые параметры. SERVICE TIERS позволит выбрать уровень базы данных, таких как BASIC | STANDARD | PREMIUM. Выберите уровень BASIC. Выберите SEERVER как сервер базы данных, его мы создали ранее. Создаваемая база данных будет такая, как показано на изображении:
Кликните по кнопке MANAGE внизу страницы, она создаст правило Брандмауэра для того, чтобы установить доступ базы данных:
Далее откроется следующая страница, где информация об Администраторе Базы данных обязательна к заполнению:
Клик на Log On выведет на экран следующую страницу:
Кликните по “Design”, чтобы составить таблицы, Views и Stored Procedures.
Кликаем по “New Table” и создаем список сотрудников, как показано:
Введите простые записи в эту таблицу, используя ссылку New Query.
Внесение изменений в Web.config файл MVC-приложения
Откройте приложения MVC в Visual Studio 2013 и внесите следующие изменения в строку подключения.
data source=;
initial catalog=Application;
user id=;
password=;
MultipleActiveResultSets=True;
App=EntityFramework"
"providerName="System.Data.EntityClient" />
(В качестве альтернативы Вы можете запустить Entity Framework в проект, в папку Models для создания строки подключения)
Создание Веб-Сайта С Помощью Windows Azure Portal
Нажмите кнопку на сайте, чтобы отобразить параметры создания веб-сайта. Нажмите на ссылку CREATE A WEBSITE. Это приведет к появлению следующих вариантов для создания веб-сайта:
Далее Вы можете ввести информацию о URL. Введённый URL уникальный и будет проверен Azure. Если это имя не будет корректное, то URL будет .azurewebsites.net. Центр обработки данных должен быть выбран согласно Вашему выбору. Как только Центр обработки данных выбран, тогда все другие ресурсы, необходимые веб-сайту, например, Базы данных SQL, должны быть размещены в том же Центре обработки данных, так как это поможет в управлении затратами. Как только будет создан Веб-сайт, портал покажет детали:
Чтобы получить детали о веб-сайте, кликните по его имени, ниже будет выведена инструментальная панель на экран, она поможет в управлении и мониторинге веб-сайта.
Чтобы опубликовать наш веб-сайт, созданный с помощью VS tools в Visual Studio, мы должны загрузить профиль публикации. Он может быть загружен и скачан по ссылке, как продемонстрировано на изображении.
Публикация веб-сайта в Visual Studio
Откройте SPA Application в Visual Studio 2013. Кликните правой кнопкой по названию проекта, чтобы вывести на экран контекстное меню Publish Option.
Эта опция выведет на экран следующее окно:
Данное окно имеет следующие параметры:
Microsoft Azure веб-сайтов - поддержка прямого входа на Windows Azure на основе подписки.
Import - позволяет импортировать веб-сайт и публиковать профиль, который загружается с портала Azure.
Custom - позволяет создать новый профиль, публиковать для развертывания веб-сайта.
Нажмите на кнопку "Import" и будет отображено следующее окно для импорта профиля публикации:
После нажатия "OK", будет отображено следующее окно с деталями веб-развертывания:
Кликните “Next”. Так как мы уже развернули базу данных по Azure SQL, и последовательность подключений к базе данных уже обновлена в web.config файле, следующее окно покажет строку подключения:
Выберите “Далее”, чтобы отобразить список файлов, которые будут опубликованы:
Кликните по кнопке “Publish”, веб-сайт будет опубликован со всеми требуемыми ссылками.
Как только веб-сайт будет успешно опубликован, он может быть просмотрен.
Примечание: в этой статье не использовался CSS и, следовательно, неправильно расположение таблиц. Добавьте свои CSS, чтобы украсить страницу.
Таким образом происходит развертывание веб-сайта на Azure.
Источник: http://www.dotnetcurry.com/showarticle.aspx?ID=1064
Асинхронне програмування на JavaScript
Автор: Дмитро Охріменко
План:
1. Різниця між синхронним та асинхронним кодом
2. Багатозадачність процеси й потоки, у чому різниця
3. Особливості багатозадачності в JavaScript
4. Асинхронні операції на практиці HTTP-запит як найпоширеніший кейс
5. Підходи до написання асинхронного коду:
Promise
Async/Await
Observable
6. Практичні поради
Різниця між синхронним та асинхронним кодом
Для початку давайте визначимо ці два терміни:
Синхронний код - це код, який виконується послідовно, функція за функцією.
Асинхронний код - код, який може виконуватися паралельно: наступна функція запускається, не чекаючи завершення попередньої.
Щоб провести аналогію з реального життя, уявімо кухаря. Якщо кухар працює синхронно, то поки він не завершить приготування однієї страви, не переходить до наступної. Але це неефективно й призводить до втрати часу. Якщо ж кухар діє асинхронно, то поки м’ясо запікається в духовці, а на плиті закипає вода, він нарізає овочі. Тобто він один, але не стоїть без діла - виконує інші задачі, поки щось готується саме.
Уявімо, що кухар - це процесор. А запікання м’яса в духовці - це завантаження файлу з мережі. Кухар може просто стояти й дивитись, як м’ясо готується. А може нарізати овочі, перевіряти, чи не з’явились нові замовлення, або скролити стрічку в соцмережі. Так само і з програмами: поки мережева карта завантажує файл, процесор не мусить чекати - він може малювати інтерфейс, оновлювати прогрес-бар чи виконувати обчислення у фоні. Але для цього потрібно правильно написати код - так, щоб він міг працювати асинхронно.
Код який виконується синхронно
```js
console.log("Початок");
console.log("Дія");
сonsole.log("Кінець");
```
Результат:
Початок
Дія
Кінець
Код який виконується асинхронно. і
``js
console.log("Початок");
setTimeout(() => { // за допомогою setTimeout ми відкладаємо запуск коду на певний час
console.log("Дія через 2 секунди");
}, 2000);
сonsole.log("Кінець");
```
Результат:
Початок
Кінець
Дія через 2 секунди
Це не та багатозадачність, як у деяких інших мовах програмування. Тут не використовуються додаткові потоки, а все працює завдяки механізму подій. Але про це детальніше дал
Багатозадачність: процеси й потоки, у чому різниця
Багатозадачність в операційній системі - це можливість запускати та керувати кількома задачами одночасно. Наприклад, працювати в браузері, слухати музику, завантажувати файл і паралельно редагувати код у Visual Studio.
На практиці процесор дуже швидко перемикається між усіма цими задачами, створюючи ілюзію одночасного виконання. Якщо процесор багатоядерний - деякі задачі справді можуть виконуватись паралельно.
Багатозадачність тісно пов'язана з двома важливими поняттями - процесами та потоками.
Процес (process) - це окремий екземпляр програми у пам'яті, який має власні ресурси: виділену область оперативної пам'яті, дескриптори файлів, змінні оточення тощо.
Потік (thread) - це одиниця виконання всередині процесу. Потоки одного процесу працюють незалежно, але мають спільний доступ до пам'яті та ресурсів процесу.
Процеси дозволяють запускати різні програми одночасно - наприклад, Google Chrome, Visual Studio Code і т.д.
Потоки дають змогу виконувати кілька задач усередині однієї програми. Наприклад, у Visual Studio Code один потік відповідає за оновлення інтерфейсу, інший перевіряє помилки в коді, ще один формує підказки під час написання. Це, звісно, спрощений приклад - у реальності VS Code використовує ще й окремі процеси для розширень і мовних серверів.
Операційна система керує як процесами, так і потоками. Вона розподіляє процесорний час між ними, ставить у чергу, може призупиняти виконання або відновлювати його за потреби.
Давайте трохи адаптуємо наш приклад з кухарем із попереднього посту. Уявімо, що процес - це ресторан, а потік - це кухар. Ресторан має все необхідне для приготування їжі: кухонне приладдя, продукти, рецепти (це можна розглядати як пам’ять і доступ до інших ресурсів). Кухар читає рецепт і, використовуючи ресурси ресторану, готує страву - так само, як потік виконує інструкції нашої програми, використовуючи ресурси процесу. Якщо ресторан хоче готувати кілька страв одночасно, йому потрібно більше кухарів, які працюють паралельно на одній кухні. Аналогічно, якщо програма повинна виконувати кілька задач одночасно - завантажувати файли, обробляти введення, оновлювати інтерфейс - вона може використовувати кілька потоків.
Коли ми створюємо програму і хочемо зробити її зручною для користувача, а також ефективною з точки зору використання ресурсів, які виділяє операційна система на процес, ми іноді починаємо використовувати потоки та прийоми багатопотокового програмування. Це велика окрема тема, і ми її зараз чіпати не будемо. Одна з причин - у JavaScript немає прямого доступу до потоків.
Уточнення. Якщо ви хочете використовувати JavaScript і все ж таки працювати з потоками - у вас є Web Workers:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
А якщо JavaScript виконується не в браузері (наприклад, у Node.js), тоді можна використовувати модуль `worker_threads`. Але варто розуміти, що це не частина стандарту мови, а можливість середовища виконання.
Додаткові корисні ресурси по цій темі:
https://www.youtube.com/@CoreDumpped - канал з короткими відео про те як працює комп'ютер.
Modern Operating System by Andrew Tanenbaum - принцип побудови та роботи операційних систем (може бути викликом для новачка, але нормально як для технічної книжки)
Особливості багатозадачності в JavaScript
JavaScript працює в одному потоці - це означає, що в будь-який момент часу виконується лише один фрагмент коду. Увесь код, який ми пишемо, виконується у call stack: це структура, в яку потрапляють усі функції, що викликаються.
Якщо одна з функцій виконується довго (наприклад, важке обчислення), усі інші задачі - включно з обробкою кліків, рендерингом чи відповідями від сервера - будуть чекати, поки call stack не звільниться.
Щоб не блокувати цей єдиний потік, браузер надає асинхронні API (setTimeout, fetch, Web API). Коли ми викликаємо, скажімо, fetch(), у стек додається лише короткий виклик цієї функції. Власне мережевий запит виконується в окремому потоці, який створює браузер. Тобто, один потік виконує задачі які є у call stack, а інший потік чекає поки відповідь поверне сервер.
Але асинхронна операція колись завершиться і треба механізм який віддасть нашому головному потоку результат роботи іншого потоку. Коли це стається колбек або проміс‑резолвер не додається одразу у call stack. Спершу він потрапляє до черги подій (task queue). За роботою черги стежить event loop. Його правило просте - поки стек порожній дістати першу задачу із черги і покласти у стек.
Так ми досягаємо псевдобагатозадачності: основний потік виконує короткі шматки коду послідовно, а довгі операції «живуть» поза стеком. Коли довгі операції завершуються вони формують чергу задач, які треба виконати а event loop ці задачі закидає до стеку, коли call stack стає порожнім.
Це максимально спрощене пояснення, і без візуалізації може здатися складним. Якщо хочете краще зрозуміти, дуже раджу подивитись відео Jake Archibald — "In The Loop" на YouTube (англійською). https://www.youtube.com/watch?v=8aGhZQkoFbQ
Або приходьте на мій курс JavaScript Поглиблений, де ми розбираємо це на практиці.
Також корисна стаття на MDN, де ці процеси описані докладніше.
Асинхронні операції на практиці: HTTP-запит як найпоширеніший кейс
Один з прикладів асинхронної операції - це запит на сервер через HTTP-протокол. Якщо організовувати запит через JavaScript у браузері без використання React, Angular або Vue.js, то це можна зробити за допомогою:
fetch
XMLHttpRequest
Спеціалізована бібліотека, наприклад, Axios
Ось так буде виглядати простий код написаний на fetch
```js
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(data => console.log(data));
```
А так на axios (axios одразу повертає розпарсений JSON як response.data, на відміну від fetch, де потрібно викликати .json() вручну)
```js
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => console.log(response.data));
```
Якщо розглянути саме fetch то ось що відбулося під капотом:
fetch створює HTTP запит вказавши HTTP метод, заголовки, тіло тощо
Цей запит передається у вбудовану систему Web API - окрему від JavaScript середу, яка працює в іншому потоці.
JavaScript не чекає відповіді - основний потік продовжує виконувати інший код
fetch повертає Promise - об'єкт, що представляє асинхронну операцію, результат якої з’явиться пізніше
Коли відповідь від сервера приходить, Web API кладе callback в чергу.
Event Loop перевіряє, чи call stack порожній, і виконує цю мікрозадачу.
Така поведінка дозволяє браузеру одночасно виконувати інші задачі, не чекаючи завершення запиту.
Про використання асинхронного коду в JavaScript є [безкоштовний урок на YouTube](https://www.youtube.com/watch?v=cvR1EQ1R0EQ)
Також більше про синтаксис Promise можна дізнатися в уроці [Асинхронний код. Promise](https://itvdn.com/ua/video/javascript-essential-ua/js-promise-ua) на ITVDN, а детальніше про варіанти організації такого коду буде написано далі.
Підходи до написання асинхронного коду
Складність роботи з асинхронним кодом полягає в тому, що обробка результату операції відбувається не відразу, а через певний час після її запуску. Ми ініціюємо асинхронну операцію й можемо виконувати інші завдання, але все одно маємо якось дізнатися про її завершення та обробити результат. Проблема в тому, що в цей момент програма вже виконує інші дії.
Тому для обробки асинхронних операцій використовується push-модель взаємодії: отримувача даних (наш код) викликає провайдер даних - окремий механізм, який керує асинхронною операцією. По суті, розробнику потрібно відреагувати на подію завершення асинхронної операції. Для цього існує кілька підходів:
callback-функція
Promise
async/await (синтаксичний цукор над Promise)
Observables
Використання функцій зворотнього виклику (callback)
Почнемо з callback-функцій. Це найпростіший підхід, але він може призвести до заплутаного коду, особливо коли одна асинхронна операція запускає іншу, і так утворюється ланцюг.
Уявімо, що маємо функцію downloadImage(url, callback), яка завантажує зображення асинхронно, не блокуючи основний потік. Перший параметр - це адреса зображення, яке потрібно завантажити, а другий - функція, яку буде викликано після завершення завантаження. При цьому саме зображення буде передане як параметр у callback.
Приклад використання:
```js
downloadImage(url1, image => document.body.append(image))
```
На перший погляд усе просто. Але якщо потрібно завантажити кілька зображень послідовно, код стає менш зрозумілим:
```js
downloadImage(url1, image => {
document.body.append(image);
downloadImage(url2, image => {
document.body.append(image);
downloadImage(url3, image => {
document.body.append(image);
})
})
});
```
Така вкладена структура швидко ускладнюється, особливо якщо замість одного рядка з DOM-змінами з’являється додаткова логіка. Подібний стиль називають "Pyramid of Doom", і його краще уникати.
Один зі способів спростити обробку асинхронних викликів - це використання Promise.
Використання Promise
Promise - це об’єкт, який представляє асинхронну операцію. У перекладі з англійської promise означає «обіцянка». Можна уявити, що це обіцянка від браузера надати в майбутньому або результат операції, або помилку, пов’язану з її виконанням.
Приклад використання: перепишемо попередню функцію downloadImage, щоб вона повертала Promise.
```js
let promise = downloadImage(url1);
promise.then(image => document.body.append(image));
```
Тут ми все одно використовуємо callback-функцію, але передаємо її вже в метод .then() об’єкта promise. Це важливий момент:
тепер асинхронна операція має об’єктне представлення, яке можна передавати як параметр у різні частини коду;
можна будувати ланцюжки промісів, позбуваючись вкладеності, яка виникала з callback.
Приклад:
```js
downloadImage(url1) // отримуємо проміс
.then(image => { // вказуємо що робити коли promise перейде в стан resolved
document.body.append(image);
return downloadImage(url2); // виконуємо метод, який повертає promise
})
.then(image => { // результат роботи попереднього промісу передається як значення
document.body.append(image);
return downloadImage(url3);
})
.then(image => {
document.body.append(image);
});
```
Тепер код виглядає лінійним і набагато зручнішим для супроводу.
У прикладах вище ми не розглядали, як саме створюється Promise, адже важливо зрозуміти мотивацію використання цих об’єктів. Тим більше, що більшість API браузера вже повертають готові проміси. Наприклад:
```js
fetch('<https://jsonplaceholder.typicode.com/users>')
.then(res => res.json());
```
Якщо хочете детальніше розібратися зі створенням Promise вручну - перегляньте документацію на MDN або мій відео урок на ITVDN.
Async/await
Супроводжувати синхронний код завжди простіше, ніж асинхронний. У 2012 році в мові C# з’явився синтаксичний цукор, який значно спростив роботу з асинхронними операціями: замість вкладених callback можна було використовувати послідовний синтаксис з новими ключовими словами async та await. Згодом цю концепцію перейняли й інші мови програмування, зокрема Python та JavaScript. В JavaScript підтримку async/await додали у 2017 році.
Призначення ключових слів
async - додається до функції та вказує, що вона завжди повертає Promise.
await - використовується перед об’єктом-промісом, щоб "дочекатися" результату перед виконанням наступних рядків коду.
Перепишемо попередній приклад із завантаженням зображень, використовуючи async/await:
```js
let image = null;
image = await downloadImage(url1);
document.body.append(image);
image = await downloadImage(url2);
document.body.append(image);
image = await downloadImage(url3);
document.body.append(image);
```
Тепер код виглядає як звичайний синхронний: немає вкладених callback, усе читається рядок за рядком. Можна подумати, що await "зупиняє" виконання, очікуючи на результат промісу. Насправді ж код не блокує основний потік - під капотом він перетворюється на машину станів, де кожен стан описує дію до або після await.
Ще одна перевага async/await - знайомий синтаксис для обробки помилок:
```js
try {
let image = null;
image = await downloadImage(url1);
document.body.append(image);
image = await downloadImage(url2);
document.body.append(image);
image = await downloadImage(url3);
document.body.append(image);
} catch (ex) {
// обробка помилки
}
```
У результаті асинхронний код виглядає так само зрозуміло, як і синхронний, що значно спрощує його супровід.
Observable
Observable - це ще один підхід до організації асинхронного коду. Назва походить від однойменного патерна проєктування (Observer pattern), який описує створення об’єктів, за якими можна «спостерігати», отримуючи від них сповіщення. Тобто це реалізація подієвої моделі за допомогою ООП.
У сучасному JavaScript ця ідея пішла далі й стала основою реактивного програмування та бібліотеки RxJS.
Якщо Promise представляє одне майбутнє значення (успішне або помилкове), то Observable - це потік значень, які можуть з’являтися з часом.
Можна уявити:
Promise - це одна посилка, яку ви отримаєте в майбутньому;
Observable - це підписка на журнал, нові випуски якого надходитимуть регулярно.
Щоб створити Observable, використовують конструктор або готові оператори RxJS. Наприклад, функція downloadImages(urls) може завантажувати кілька картинок і відправляти їх «у потік» по мірі завантаження:
```js
import { Observable } from 'rxjs';
function downloadImages(urls) {
return new Observable(subscriber => {
urls.forEach(url => {
downloadImage(url, image => {
subscriber.next(image); // надсилаємо картинку у потік
});
});
subscriber.complete(); // повідомляємо, що потік завершено
});
}
```
Щоб використати Observable, на нього треба підписатися за допомогою subscribe:
```js
downloadImages([url1, url2, url3])
.subscribe({
next: image => document.body.append(image), // що робити з новим значенням
error: err => console.error(err), // обробка помилок
});
```
Переваги Observable
працюють із потоком даних, а не з одним результатом;
підтримують підключення операторів трансформації (фільтрація, мапінг, комбінування потоків);
можна легко скасувати виконання (відписатися від потоку).
Нижче приклад обробки даних через оператори. В RxJS оператори підключаються через метод pipe:
```js
import { filter, map } from 'rxjs/operators';
downloadImages([url1, url2, url3])
.pipe(
filter(image => image.width > 100), // пропускаємо лише великі картинки
map(image => {
image.classList.add('highlight');
return image;
})
)
.subscribe({
next: image => document.body.append(image),
error: err => console.error(err),
complete: () => console.log('Готово')
});
```
Таким чином, як і у випадку з Promise, можна будувати ланцюжки обробки. Але Observable значно гнучкіші: вони дозволяють працювати не лише з одним значенням, а з динамічною послідовністю даних у часі.
Для глибшого занурення рекомендую офіційний гайд Observable на RxJS.dev. та відео уроки Observables. Частина 1, та Observables. Частина 2[1]
Практичні поради по работі за асинхроним кодом
Не змішуйте підходи без потреби
Якщо почали писати з async/await, не вставляйте всередину .then() без особливої причини. Це ускладнює читання.
Обробляйте помилки
Використовуйте try/catch для async/await або .catch() для Promise. У випадку Observable завжди додавайте обробку error у subscribe().
Скасовуйте непотрібні операції
Для Observable використовуйте unsubscribe(), коли потік більше не потрібен. Для fetch можна застосувати AbortController, щоб зменшити навантаження й уникнути витоків пам’яті.
Уникайте "Pyramid of Doom"
Замість вкладених callback застосовуйте Promise, async/await або Observable.
Використовуйте паралельне виконання
Якщо операції незалежні, запускайте їх одночасно через Promise.all().
Ізолюйте логіку обробки
Розділяйте завантаження даних та маніпуляції з DOM. Це спростить тестування й повторне використання коду.
Логуйте стан і помилки
Під час розробки виводьте у консоль ключові події асинхронних операцій, щоб відстежувати їх послідовність.
Пам’ятайте про event loop
Розуміння різниці між мікрозадачами й макрозадачами допоможе прогнозувати порядок виконання коду.
Перевіряйте сумісність середовища
Деякі API можуть бути відсутні у певних середовищах (наприклад, fetch у Node.js доступний лише починаючи з версії 18).
400+ питань на співбесіді щодо С++
Автор: Влад Сверчков
Дорогие друзья! Предлагаем вашему вниманию перевод статьи, опубликованной на DOU.ua 5 апреля 2021 года. Оригинальная версия на украинском языке доступна по ссылке.
Junior
1.1 Общие вопросы
1.2 Метапрограммирование
1.3 Препроцессор и компиляция
1.4 Язык C
1.5 Язык С++ и ООП
1.6 STL / Algorithms
1.7 Многопоточность
1.8 Networking
1.9 OS/Linux
1.10 SCM / CI / CD
1.11 Практические задания
Middle
2.1 Общее
2.2 Препроцессор и компиляция
2.3 Язык С
2.4 Язык С++
2.5 Паттерны проектирования
2.6 Метапрограммирование
2.7 OOP/OOD
2.8 STL / Algorithms
2.9 Многопоточность
2.10 Networking
2.11 SCM / CI / CD
2.12 Практические задания
Senior
3.1 Общее
3.2 Препроцессор и компиляция
3.3 C/C++
3.4 OOP/OOD
3.5 STL / Algorithms
3.6 Многопоточность
3.7 SCM / CI / CD
3.8 Практические задания
Предлагаем список технических вопросов, которые, вероятно, вам поставят на собеседованиях по C++. Вопросы предоставили специалисты, принимающие участие в проведении технических интервью по этому языку. Учтите, что есть широкий спектр специализаций, поэтому выбирайте свое направление и готовьтесь.
Junior
Общие вопросы
1. В чем заключаются основные принципы ООП?
2. Что такое сложность алгоритма?
3. Код работает неправильно. Что делать?
4. Объясните такие структуры данных, как стек и очередь.
5. Какие книги, связанные с программированием, читали? Чему с них научились?
6. Что интересного нашли в новых стандартах С++17, С++20?
7. Что такое таблица ASCII?
8. Что такое Unicode?
9. Что такое паттерны проектирования и для чего их используют?
10. Патерны Singleton, Strategy, Template-Method, Decorator?
11. Для чего нужны модульные тесты?
12. Какая разница между модульными и интеграционными тестами?
13. Что такое TDD?
Метапрограммирование
14. Что такое шаблонный класс и шаблонная функция?
15. Что такое конструкторы? Какие типы знаете?
16. Может ли конструктор быть шаблонной функцией?
17. Может ли виртуальная функция быть шаблонной?
18. Что такое инстанциация шаблона?
19. Что такое специализация шаблона? Частичная специализация шаблона?
20. Расскажите об имплементации шаблонных классов в срр-файле?
Препроцессор и компиляция
21. Как проходит процесс компиляции срр-файлов в бинарный файл?
22. Что такое препроцессор?
23. Как работает препроцессор?
24. Какие знаете команды препроцессора?
25. Как работает директива include?
26. Как работает директива define?
27. Что именно линкует линкер?
28. Что такое оптимизация компилятора?
29. Что такое флажки компиляции?
30. Как защитить хедер от повторного включения?
31. Что делает директива include?
32. Как работают макросы?
Язык C
33. Как static влияет на глобальные/локальные переменные?
34. Как сonst влияет на переменную?
35. Какие варианты использования extern знаете?
36. Какие варианты использования volatile знаете?
37. Какие есть битовые операции?
38. Что такое булевая алгебра?
39. Расскажите об этапах разработки библиотеки или программы.
40. Что такое алгоритмы сортировки и какие вы знаете?
41. Какие алгоритмы работы со строками знаете?
42. Какие алгоритмы на графах знаете?
43. Где может храниться переменная?
44. Какая разница между calloc и malloc?
45. Для чего используют realloc?
46. Что такое указатель?
47. Каков размер указателя и от чего он зависит?
48. Какие есть операции с указателями?
49. Что такое struct?
50. Как определить размер структур?
51. Что такое выравнивание в структурах?
52. Что такое union?
53. Какой размер union?
C++/OOP
54. Что такое класс?
55. Какие есть основные типы данных в C++?
56. Что такое инкапсуляция? Как она реализуется в C++?
57. Какие есть встроенные типы в С++?
58. Что такое enum?
59. Как соотносится класс и объект?
60. Какая разница между структурой и классом?
61. Разница между private/protected/public и где они используются?
62. Какие методы класса являются стандартными для класса?
63. Что такое абстрактный класс и зачем он?
64. Сколько памяти занимает объект пустого класса class A {}; ?
65. Что случится с функцией, если к ней добавить ключевое слово static? В контексте члена класса? В контексте метода класса?
66. Какие особенности статических полей класса?
67. Какая особенность константных методов-членов класса?
68. Как изменить поле класса в константном методе класса?
69. Какие методы можно вызвать из константных объектов?
70. Что такое куча и стек? Различия, принцип работы.
71. В чем разница между указателем и ссылкой?
72. Для чего нужен указатель на функцию? Как его объявить?
73. Что будет, если забыть вызвать delete? Когда освободится эта память?
74. Что такое умный указатель? Какие умные указатели есть в стандартной библиотеке?
75. Как работает std::unique_ptr?
76. Как работает std::shared_ptr?
77. Расскажите о константности переменной, ссылки, указателя. Что такое константный указатель и указатель на константу? Размер указателя в памяти?
78. Расскажите о передаче аргументов по значению, по ссылке и по указателю.
79. Расскажите о порядке вычисления аргументов функции?
80. Что произойдет, если вернуть ссылку на временный объект?
81. Что такое перегрузки функции? Виды перегрузки.
82. Что такое явное и неявное приведение типов в С++? Расскажите о функциях явного приведения типов в C++.
83. Что такое инициализация переменной в if?
84. Что такое ленивые вычисления в С++?
85. Расскажите о циклах for и range-for.
86. Что делает ключевое слово auto? auto-определение return-типа, аргументов функции?
87. Чем отличаются delete и delete [ ] ? Что случится, если вызвать delete у объекта, созданного через new [ ] ?
88. Обработка ошибок в С++. Какие конструкции используют при обработке exception?
89. Можно ли выбрасывать exception из конструктора? Какие поля будут сконструированы, какие поля будут разрушены?
90. Что такое memory leak?
91. Можно ли выбрасывать exception из деструктора?
92. Как отловить деление на 0 в С++?
93. Как работают константные методы?
94. Что такое лямбда-функция в С++? Как получить доступ к переменным во внешней области видимости?
95. Для чего использовать namespace, anonymous namespace?
96. Как вызвать объект из nested namespace?
97. Как работают inline-функции? Может ли такая функция быть рекурсивной?
98. Что такое полиморфизм?
99. Для чего используется наследование?
100. Какие бывают типы наследования?
101. Для чего используют виртуальное наследование?
102. Как можно решить проблему ромбовидного наследования без использования виртуального наследования?
103. Что случится, если класс-наследник передать по значению в функцию, которая принимает базовый класс?
104. Что случится, если пронаследоваться от базового класса, который не имеет виртуального конструктора?
105. Что случится, если вызвать переопределенную virtual function из конструктора? Может ли конструктор быть виртуальным?
106. Может ли pure virtual function иметь имплементацию? Что случится, если вызвать pure virtual function из конструктора?
107. Какие методы генерируются для класса по умолчанию? В каком случае такие методы не будут генерироваться? Как заставить компилятор добавить/удалить эти методы?
108. Как запретить наследовать класс?
109. Какой порядок конструирования и разрушения классов в иерархии? Порядок инициализации полей класса?
110. Какие есть способы инициализации полей класса?
111. Может ли деструктор быть виртуальным?
112. Что делает ключевое слово virtual?
113. Для чего используют виртуальный деструктор?
114. Что такое глубокое копирование?
115. Что такое виртуальные функции и зачем они нужны?
116. Как защитить объект от копирования?
117. Что такое семантика перемещения?
STL / Algorithms
118. Из чего состоит STL?
119. Какие алгоритмы применяли с STL? В чем преимущество использования алгоритмов перед собственноручно написанными функциями?
120. Расскажите о контейнерах стандартной библиотеки vector, list, map, unordered_map.
121. Какие знаете типы итераторов? Чем они отличаются? В каких контейнерах используются?
122. Какая разница между std::set, std::map, std::unordered_multimap?
123. Что такое идиома remove-erase?
124. Как получить наименьшее значение типа?
125. Какая разница между std::map и std::hashmap?
126. Как подсчитать количество элементов в std::list?
127. Что такое сложность алгоритма и от чего она зависит?
128. В чем разница между vector и list и в каких случаях их лучше использовать?
Многопоточность
129. Что вам известно о многопоточности?
130. Что общего и различного в процессах и потоках?
131. Как синхронизировать передачи информации между потоками?
132. Какая разница между мьютексом и семафором?
133. Что такое deadlock?
134. Является ли С++ thread-safe?
135. Что такое race-condition?
136. Как избежать состояния гонки?
137. Что такое атомарная операция?
138. Как работать с std::mutex?
Networking
139. Что такое сокет?
140. Какие операции можно делать с сокетом?
141. Какая информация нужна, чтобы создать сокет?
142. Какие бывают модели сетей?
143. Расскажите об уровнях модели OSI.
144. Расскажите об уровнях модели TCP/IP.
145. Что такое IP-адрес?
146. Для чего используется маска подсети?
147. Какая разница между IPv4 и IPv6?
148. Сколько памяти необходимо для хранения IPv4?
149. Для чего нужен порт?
150. Сколько максимально может быть портов?
151. Какая разница между TCP и UDP?
152. Для чего такой ненадежный UDP-протокол?
OS/Linux
153. Что такое менеджер пакетов?
154. Какие бывают менеджеры пакетов?
155. Какие бывают дистрибутивы Linux?
156. Что такое PID?
157. Для чего используют файловые дескрипторы?
158. Расскажите о стандартных файловых дескрипторах процесса.
159. Что такое Pipe?
160. Что такое Named Pipe?
161. Что такое UID?
162. Расскажите о командах bash.
SCM / CI / CD
163. Какие есть виды SCM?
164. Для чего используют системы контроля версий?
165. Какие есть команды git?
166. Какие этапы во время комита изменений?
167. Разница между git fetch и git pull?
168. Какие есть этапы решения merge conflict?
Практические задания
169. Посчитайте количество единиц в произвольном числе.
170. Есть структура по типу «односвязный список». Напишите функцию, которая разворачивает список. То есть, первый элемент становится последним, а последний - первым.
171. Напишите реализацию функции int atoi (const char *str); преобразования строки в число.
172. Для структуры типа односвязный список напишите функцию вставки элемента.
173. Реализуйте класс vector.
174. Реализуйте бинарный поиск в массиве.
175. Реализуйте любую сортировку.
176. Реализуйте макрос для сравнения двух строк.
177. Реализуйте реверс строк.
178. Реализуйте перевода числа из строки в int.
179. Реализуйте подсчет слов в предложении.
180. Реализуйте подсчет чисел Фибоначчи.
181. Найдите такие элементы двух массивов, которые попадаются только в каждом из них. Желательно использовать STL.
182. Удалите из unordered_map элементы, которые делятся на 2 и выведите ключи этих элементов.
183. Напишите класс для логирования, который мог бы логировать к консоли или файлу.
184. Напишите функцию для определения, является ли определенный год високосным.
185. Напишите функцию для определения, является ли определенное слово палиндромом.
186. Напишите реализацию паттерна Singleton.
187. Напишите реализацию std::vector с операциями: push_back, push_front, pop_back, pop_front, size, clear.
188. Напишите рекурсивный поиск значения в дереве бинарного поиска.
189. Напишите функцию, которая проверяет, является ли дерево сбалансированным.
190. Напишить функцию для поиска уникального элемента в массиве.
Middle
Общее
1. Какие курсы прошли или книги прочитали за этот год? Чему научились?
2. Что нравится и не нравится в С++? Чего не хватает?
3. Что интересного нашли в новых стандартах С++17, С++20 (конкретные фичи)?
4. Расскажите о фичах, которые появились в разных версиях языка.
5. Расскажите о модели памяти, которая появилась в С++11 стандарте.
6. Что такое сериализация? Какие библиотеки знаете?
7. Какие знаете паттерны проектирования?
8. Что такое операционная система? Какие существуют типы по назначению?
9. Назвать основные составляющие и принципы работы ОС Linux в качестве примера системы общего назначения.
10. Что такое SFINAE и PIMPL?
11. Назовите порождающие, структурные и поведенческие паттерны программирования и приведите примеры их использования.
Препроцессор и компиляция
12. Расскажите о системах автоматизации билд-процесса.
13. Какая разница между статической и динамической библиотеками?
14. Какая разница между исполнительным файлом и динамической библиотекой?
15. Что такое DLL hell?
16. Что такое флажки компиляции (fPIC)?
17. В чем разница между дебаженной и релизной сборкой?
18. Что нужно для использования сторонней библиотеки?
19. Что такое internal linkage?
C
20. Что будет, если дважды вызвать free?
21. Как происходит вызов функции?
22. Как происходит передача параметров в функцию?
23. Как прорабатывается константа переменных?
24. Что означает ключевое слово inline?
25. Для чего используют выравнивания, можно ли его контролировать?
26. Расскажите о битовых полях.
27. Для чего нужен extern "C"?
28. Что будет, если в двух файлах сделать функцию с одинаковым именем и параметрами? На каком этапе возникнет ошибка?
29. Как экспортировать/импортировать функции из динамической библиотеки?
30. Какая разница между С-style приведением типов и C++ приведением?
C++
31. Что такое явное и неявное приведение типов в С++? Зачем делать explicit-конструктор?
32. Что такое Uniform initialization? Aggregate initialization?
33. Что такое Reference to temporary object? Как продлить время жизни временного объекта?
34. Что такое делегирующий конструктор?
35. Что такое список инициализации?
36. Какой порядок инициализации полей класса? Что случится, если конструктор инициализирует поля в другом порядке?
37. Что случится, если инициализировать поле другим полем?
38. Что такое copy elision? Сколько раз будет вызван конструктор/деструктор у объекта, которого возвращают по значению?
39. Что такое move-семантика?
40. В каких случаях не будет сгенерирован конструктор копирования?
41. Чем отличается конструктор копирования от оператора присваивания?
42. При каких условиях в конструкторе можно выбросить exception?
43. Что такое конструктор по умолчанию? Для чего нужны default и delete?
44. Чем отличается интерфейс от абстрактного класса?
45. Какие виды полиморфизма в С++?
46. Как реализовано наследование в большинстве компиляторов?
47. Множественное наследование: за и против?
48. Виртуальное наследование и порядок конструирования?
49. Зачем использовать override?
50. Какие есть правила вывода типа при использовании auto? В каких случаях auto может привести к нежелательному копированию объекта?
51. Расскажите обо всех возможных способах использования ключевого слова static в С++. Что такое static initialization order fiasco?
52. Что делает вызов throw; в блоке catch?
53. Чем отличается constexpr от const?
54. Что такое const correctness?
55. В каком случае можно использовать const_cast?
56. Что такое ключевое слово mutable и когда его нужно использовать?
57. Что такое ключевое слово friend и когда его нужно использовать?
58. Расскажите о лямбда-выражениях в С++ и доступ к переменным во внешней области видимости, захват this в лямбду и время жизни лямбды и захваченных переменных?
59. Что такое функтор? Напишите пример.
60. Что такое специализация шаблона?
61. Что такое dynamic_cast и run-time type identification?
62. Что такое exception? Как бросить и поймать?
63. Что будет, если бросить exception из конструктора? А из деструктора?
64. Что будет, если не поймать exception?
65. Что произойдет, если exception выйдет за пределы блока noexcept функции?
66. Для чего можно использовать приватное наследование?
67. Что такое контракт функции?
68. Что такое vptr и vtable?
69. Где содержится vptr?
70. Где содержится vtable?
71. Какая разница между overload and override?
72. Как компилятор различает члены класса и обычные переменные в функциях?
73. Зачем используют exceptions?
74. Что такое блоки try-throw-catch?
75. Расскажите о логике catch-блоков.
76. Что такое move constructor?
77. В чем разница между константным методом и неконстантным?
78. Что такое В-нотация и как определить сложность любого алгоритма?
79. Что такое таблица виртуальных методов?
80. Какие функции класса автоматически генерирует компилятор, если их не определить?
81. Что такое выравнивание данных?
82. Что такое exception?
83. Какие есть стандартные контейнеры и на основе каких структур они построены?
84. Что такое Undefined behavior? Приведите примеры.
85. Как определить, что в программе есть memory leak?
86. Для чего нужен std::make_shared? Чем он лучше создания std::shared_ptr через конструктор?
87. Что будет, если выделить один объем памяти, а записать больше?
88. Что такое переполнение stack?
Паттерны проектирования
89. Зачем нужны паттерны? Какие типы паттернов различают?
90. Недостатки паттерна Singleton? Когда он уместен?
91. Преимущества и недостатки PIMPL?
92. В чем разница между паттерн-фабрикой и фабричным методом? Когда использовать какой из них?
93. Что такое паттерн Observer?
94. Як контролировать состояние программы? Машину состояний? Паттерн состояние?
95. Что такое паттерн Visitor?
Метапрограммирование
96. Какие есть правила вывода типа в шаблоне?
97. Чем отличается using от typedef?
98. Сколько памяти занимает произвольная структура? Что такое выравнивание объекта?
99. Почему пустая структура занимает 1 байт? Какая минимальная единица адресации в С++?
OOP/OOD
100. Что такое SOLID? Что означает каждый из этих принципов?
101. Расскажите о паттернах проектирования.
102. Что такое Dependency Injection? Приведите пример.
103. Какие преимущества и недостатки функционального подхода?
104. Что такое принцип RAII?
105. Что такое принцип DRY?
106. Что такое принцип KISS?
107. Какие преимущества композиции перед наследованием?
STL / Algorithms
108. Какие алгоритмы с STL использовали? Каких не хватает?
109. Какими особенностями должен обладать класс, чтобы он был итератором?
110. Какие бывают итераторы?
111. Расскажите об инвалидации итераторов.
112. Как оптимизировать удаление элемента со средины вектора?
113. Как реализован vector?
114. Как реализован list?
115. Как расширить STL-контейнеры?
116. Какие есть алгоритмы в STL?
117. В чем разница между vector, deque, list, set e STL?
118. Когда надо использовать map? Когда - unordered_map? Какая сложность поиска и вставки в этих контейнерах?
119. Как проверить, есть ли в контейнере элементы? Почему вызов container.size() является плохой практикой?
120. Что такое exception safety guarantee? Какую exception safety guarantee имеют STL-контейнеры?
121. Расскажите о типах умных указателей и о подсчете ссылок в них.
Многопоточность
122. Является ли С++ thread-safe?
123. В чем разница между многопоточностью и асинхронностью?
124. Что такое многопоточность? Какую функциональность предоставляет С++ для разработки многопоточных приложений? Какие основные проблемы многопоточных приложений?
125. Как передать информацию между несколькими процессами?
126. Как синхронизировать между собой несколько процессов?
127. Какие есть особенности работы с shared memory?
128. Как работает spinlock?
129. Какие вы знаете особенности использования recursive mutex?
130. Расскажите о read-write mutex.
131. Что такое race-condition? Взаимная блокировка? Что такое критическая секция?
132. Как избежать состояния гонки?
133. Чем отличается мьютекс от семафора?
134. Какие примитивы синхронизации реализованы в C++? Преимущества lock_guard?
135. Что случится, если exception выйдет за пределы потока? Какие инструменты есть для безопасной асинхронности в С++?
136. Чем отличается std::launch::async от std::launch::deferred?
137. Что такое атомарная операция? std::atomic?
138. Как работать с std::conditional_variable?
139. Как создать поток с помощью std::thread?
140. На сколько потоков лучше разбить задачу? От чего это зависит?
141. Как работать с std::async?
142. Thread-safe гарантии контейнеров в С++? В чем недостаток интерфейса front() + pop_front()?
Networking
143. Что такое TCP handshake?
144. Какая разница между TCP и UDP?
145. Расскажите о протоколах верхнего уровня.
146. Какая разница между HTTP и HTTPS?
147. Расскажите об SSL/TLS handshake.
SCM / CI / CD
148. Расскажите о процессах CI.
149. Как отредактировать комит?
150. Расскажите об интерактивном rebase.
151. Какие могут быть способы дебаггинга кода?
152. Для чего нужны Unit test? Чем отличается от Functional Test?
153. Как тестировать код? Какой используете фреймворк?
154. Какие библиотеки знаете для написания тестов?
155. Что такое mock?
156. Сколько тестов нужно написать на одну функцию?
157. Что такое побочный эффект, идемпотентность и чистые функции?
158. Что такое контейнеризация и в чем преимущества и недостатки? Что такое Docker или иной инструмент контейнеризации?
159. Что такое CI/CD и какие преимущества приносит для разработчика?
160. Какие принципы итеративных методологий?
161. Какие преимущества и недостатки code-convention?
Практические задания
162. Напишите максимально корректную реализацию класса string с конструктором копирования и оператором присваивания.
163. Напишите реализацию очереди.
164. Реализуйте функцию, которая за один проход найдет уникальный элемент в контейнере.
165. Напишите thread-safe пул потоков.
166. Напишите игру жизни в ООП стиле.
167. Напишите класс, который достает из базы список товаров по фильтру и показывает на консоли. Напишите тесты для него.
168. Любая задача на написание кода, чтобы проверить умение проектировать интерфейсы и придерживаться принципов SOLID, DRY, KISS.
169. Напишите свою реализацию std::atomic.
170. Напишите программу для анализа графов: нахождение циклов, deadlock-состояний, циклов, недоступных состояний.
171. Напишите программу, которая бы проверяла, что в системе запущен только один ее экземпляр. Решение должно быть cross-platform.
172. Проанализируйте C++ код с точки зрения качества: выявить потенциальные memory leak, нерациональное использование STL-контейнеров, алгоритмов, неоптимальные конструкции и тому подобное.
173. Напишите код для решения судоку.
174. Напишите код, который найдет зацикливание в односвязном списке.
Senior
Общее
1. Как вы понимаете SOLID?
2. Как разработать систему плагинов на С++?
3. Что такое RPC? Какие библиотеки знаете?
4. На что обращать внимание при проведении code review?
5. Какие есть проблемы при написании кроссплатформенного кода? На что обращать внимание?
6. Что делать, если код работает медленно?
7. Какие есть способы и методологии измерения быстродействия кода? Как можно устранить/уменьшить влияние замеров на быстродействие?
8. Что такое SFINAE? Для чего используется?
9. Что такое метапрограммирование? С помощью чего реализуется на С++?
10. Как использовать variadic templates?
11. Как тестировать закрытые методы?
12. Как считать покрытие тестами? Нужно ли это делать?
13. Что такое cache miss и как это выявить?
14. Что такое SIMD-инструкции? Какие необходимые условия и способы их использования?
15. Что такое покрытие кода и как обеспечивается?
16. Опишите принципы lock-free структур данных и свой опыт работы с ними.
Препроцессор и компиляция
17. Расскажите о построении билд-системы.
18. Как работать с билд-системами: Make, CMake.
19. Как интегрировать third-party в проект?
20. Что такое барьеры памяти?
21. Расскажите о работе с сырыми указателями и о ручном управлении памятью.
22. Что такое статический анализатор кода? Какие знаете?
23. Что такое динамический анализатор кода? Какие знаете?
24. Проект медленно собирается. Как можно ускорить?
C/C++
25. Расскажите об использовании realloc в контейнерах.
26. Как работают шаблоны?
27. Расскажите о специализации шаблонов.
28. Как работает RTTI?
29. Можно ли использовать exception в конструкторе/деструкторе?
30. Что такое rvalue и lvalue?
31. В чем особенности контейнеров std::set, std::map, std::unordered_map, std::hash?
32. Что такое placement new? Для чего используют? Как сделать placement delete?
33. Как размещается в памяти класс со множественным наследованием и виртуальными функциями?
34. Как работают точки остановки?
35. Что такое уязвимости? Каков механизм их работы?
36. Как написать собственный std::shared_ptr?
37. Что такое curiously recurring template pattern?
38. Опишите назначение и принцип работы std::shared_ptr, std::unique_ptr и std::weak_ptr.
39. Какое назначение и отличия использования std::variant и std::any?
40. Какие улучшения получил std::search в С++17 ?
41. Что такое copy elision и когда он становится возможным? Какие особенности для разных стандартов?
42. Что такое Return Value Optimization?
OOP/OOD
43. Объясните принципы SOLID.
44. Объясните принципы KISS.
45. Объясните принципы YAGNI.
46. Какие есть подходы к оптимизации кода?
47. На что стоит обращать внимание при code review?
48. Какие есть паттерны проектирования? Почему не советуют использовать Singleton?
49. Что такое статический полиморфизм?
STL / Algorithms
50. Когда std::vector может использовать std::move?
51. Расскажите о своем любимом алгоритме поиска.
52. Что такое lock-free и wait-free алгоритмы? В чем их отличия и способы реализации?
53. Опишите назначение execution policy для параллельных алгоритмов.
Многопоточность
54. Расскажите о построении API, рассчитанных на многопоточное использование.
55. В чем разница между kernel-level и user-level потоками?
56. Что такое coroutine?
57. Что делает спецификатор thread_local?
58. Как реализовать синхронизацию в задаче producer-consumer?
59. Як синхронизироваться между различными процессами?
SCM / CI / CD
60. Расскажите о настройке процесса менеджмента ветвей репозитория.
61. Расскажите о стратегии разветвления (branching).
Практические задания
62. Напишите базовую реализацию std::shared_ptr.
63. Реализуйте алгоритм сортировки.
64. Реализуйте алгоритм хеширования.
65. Реализуйте shared_ptr с расширением для weak_ptr.
66. Реализуйте простейший producer-consumer, используя условные переменные.
67. Опишите как можно подробнее, что происходит в системе, когда приложение делает сетевой запрос.
68. Детально описать дизайн программного компонента, например, системы голосования; учесть при этом высокую нагрузку и сделать ее расширяемой и отказоустойчивой.
Выражаем благодарность за участие в статье Александру Жакуну, Ярославу Пушко, Назару Семенишину, Сергею Подоброму, Владимиру Кочуну, Владимиру Новикову, Сергею Кривоносу, Марку Цирульнику, Кириллу Пшеничному, Виктору Шуму, Сергею Братусю.
300+ запитань щодо JavaScript на співбесіді
Автор: Влад Сверчков
Дорогие друзья! Предлагаем вашему вниманию перевод статьи, опубликованной на DOU.ua 21 декабря 2020 года. Оригинальная версия на украинском языке доступна по ссылке.
На этот раз предлагаем ознакомиться с актуальными вопросами, которые задают на технических интервью по JavaScript. Естественно, мы говорим о широком спектре специализаций, поэтому выбирайте свое направление и готовьтесь.
Junior
Общие:
1. Какие методы HTTP-запросов вы знаете?
2. Какие версии HTTP-протокола вам известны?
3. Какие знаете коды ответа (состояния) HTTP?
4. Что такое Cross-Origin Resource Sharing? Как устранить проблемы с CORS?
5. Что такое cookie?
6. Какой максимальный размер cookie?
7. Что означает директива use strict?
8. Чем JS отличается при работе на front-end и back-end?
9. Что такое статическая и динамическая типизации?
10. Как клиент взаимодействует с сервером?
11. Что такое REST?
12. Объяснить понятие мутабельность/иммутабельность? Какие типы являются мутабельными и наоборот?
13. Как искать ошибки в коде? Используете ли вы дебаггер?
14. Каких известных людей из мира JS знаете?
JS Core
15. Какие существуют типы данных в JS?
16. Как проверить, является ли объект массивом?
17. Как проверить, является ли число конечным?
18. Как проверить, что переменная равна NaN?
19. Чем отличается поведение isNaN() и Number.isNaN()?
20. Сравните ключевые слова var, let, const.
21. Что такое область видимости?
22. Что такое деструктуризация?
23. Для чего предназначены методы setTimeout и setInterval?
24. Сравните подходы работы с асинхронным кодом: сallbacks vs promises vs async / await.
25. Можно ли записывать новые свойства / функции в прототипы стандартных классов (Array, Object и т. д.)? Почему нет? В каких случаях это делать можно? Как обезопасить себя, если нужно расширить прототип?
26. Назовите методы массивов, какие помните, и скажите, для чего они нужны.
27. Какие методы перебора массива знаете? В чем их отличие?
28. Как работают операторы присваивания / сравнения / строчные / арифметические / битовые и т. д.?
29. Опишите назначение и принципы работы с коллекциями Map и Set.
30. Что означает глубокая (deep) и поверхностная (shallow) копия объекта? Как сделать каждую из них?
Ответы на некоторые из этих вопросов вы можете найти в видео курсе JavaScript Стартовый (урок 3, урок 5, урок 10), JavaScript Базовый (урок 3, урок 13, урок 19), ECMAScript 6 (урок 6).
Функции:
31. Какая разница между декларацией функции (function declaration) и функциональным выражением (function expression)?
32. Что такое анонимная функция?
33. Расскажите о стрелочных функциях (arrow function). В чем заключаются отличия стрелочных функций от обычных?
34. Что такое и для чего используют IIFE (Immediately Invoked Function Expression)?
35. Что такое hoisting, как он работает для переменных и функций?
36. Что такое замыкание (closure) и какие сценарии его использования?
37. Как вы понимаете замыкания? Что будет выведено в консоли в этом случае?
var f = function() {
console.log(1);
}
var execute = function(f) {
setTimeout(f, 1000);
}
execute(f); // что выведет в консоль и почему
f = function() {
console.log(2);
}
38. Что такое рекурсия?
39. Что означает ключевое слово this?
40. Что такое потеря контекста, когда происходит и как ее предотвратить?
41. Методы функций bind / call / apply - зачем и в чем разница?
Ответы на некоторые из этих вопросов вы можете найти в видео курсе JavaScript Стартовый (урок 11, урок 12) и JavaScript Базовый (урок 13, урок 14).
Front-end
42. Что такое DOM?
43. Сравните атрибуты подключения скрипта async и defer в HTML-документе.
44. Какая разница между свойствами HTML-элементов innerHTML и innerText?
45. Опишите процесс всплытия (bubbling) событий в DOM.
46. Как остановить всплытие (bubbling) события?
47. Как остановить дефолтную обработку события?
48. Чему равен this в обработчике событий (event handler)?
49. Что такое LocalStorage и SessionStorage? Какой максимальный размер LocalStorage?
50. Как получить высоту блока? Его положение относительно границ документа?
51. Что такое webpack?
52. Чем отличается dev-сборник от prod?
Ответы на некоторые из этих вопросов вы можете найти в видео курсе JavaScript Базовый (урок 1, урок 6, урок 7, урок 8, урок 17) и ECMAScript 6 (урок 1).
Верстка
53. Что такое блочная модель CSS?
54. Какие способы центрирования блочного контента по горизонтали и вертикали знаете?
55. Какие подходы в верстке вам известны (float, flex, grid, etc.)?
56. Как сделать приложение responsive?
57. Какие есть принципы семантической верстки?
58. Зачем нужны префиксы для некоторых CSS-свойств (-webkit-, -moz- и т. д.)?
59. Как упростить написание кросс-браузерных стилей?
60. Практические задачи: прокомментировать и исправить пример плохого CSS или HTML.
61. Что такое CSS-препроцессоры? С какими работали? Что нового они приносят в стандартный CSS?
Ответы на некоторые из этих вопросов вы можете найти в видео курсе HTML5 & CSS3 Стартовый (урок 5, урок 6), HTML5 & CSS3 Углубленный (урок 4). Курсы Верстка сайта на CSS Grid и Верстка сайта на FlexBox CSS дадут комплексные знания и практические навыки применения технологий FlexBox и Grid.
Angular
62. Перечислите основные компоненты фреймворка (модуль, роут, директива и т .п.).
63. В чем разница между компонентом и директивой?
64. Расскажите о жизненном цикле компонента.
65. Перечислите часто используемые хуки жизненного цикла компонента и расскажите, для чего они нужны?
66. В чем разница между конструктором и ngOnInit-хуком?
67. Как защитить роут от несанкционированного доступа? Какие механизмы предоставляет для этого фреймворк?
68. Что такое Lazy loading, как и для чего используется?
69. Какое назначение RouterOutlet?
70. Как компоненты могут взаимодействовать друг с другом?
71. Как создать two-way binding свойство для компонента?
72. Какие типы форм у фреймворка? В каких случаях и что лучше использовать?
73. Какие состояния у формы и как это можно применить?
74. Зачем нужны сервисы? Как с ними работать?
75. Что такое singleton-сервисы? Каково их назначение? Способ создания?
76. Какие есть способы объявления сервисов?
77. Для чего нужны модули? Сколько их должно быть в проекте?
78. Зачем нужны общие модули (shared)?
79. Какие преимущества типизации в TypeScript?
80. Какие возможности TypeScript можно использовать для типизации (здесь имеются в виду интерфейсы, типы, enum и т. д.)?
81. Какая разница между интерфейсом и классом?
82. В чем разница между интерфейсом и абстрактным классом?
83. Какая разница между интерфейсом и типом?
84. Что такое RxJS? Как он используется во фреймворке? Какие компоненты фреймворка тесно связаны с ним?
85. Чем отличаются Observable и Promise?
86. Для чего нужны Subjects? Какие типы Subjects существуют?
87. Как сделать несколько последовательных запросов к API с помощью HTTP-сервиса и RxJS?
88. Какая разница между switchMap, concatMap, mergeMap?
89. Как можно конфигурировать Angular-приложение?
90. Зачем нужны environment-файлы? Когда их лучше не использовать?
91. В чем разница между «умным» (smart) и «глупым» (dumb) компонентами? В каких случаях применяется каждый из них?
92. В чем разница между NgForm, FormGroup и FormControl и как их применяют для построения форм?
93. Зачем нужен и как работает async pipe?
94. Как следить за развитием фреймворка? Каких известных людей, связанных с Angular, знаете / читаете?
Ответы на некоторые из этих вопросов вы можете найти в видео курсах Angular Базовый и Angular Углублённый.
React
95. Работали ли вы с классовыми компонентами? В чем их особенность?
96. Какие данные лучше хранить в состоянии компонента, а какие передавать через пропсы? Приведите пример.
97. Ознакомлены ли вы с хуками? В чем их преимущества? Приходилось ли делать свои и с какой целью?
98. Знакомы ли вы с фрагментами и порталами? Зачем они нужны?
99. Когда и для чего используют рефы?
100. Какие вы знаете методы жизненного цикла компонента?
101. В каком методе жизненного цикла компонента лучше делать запросы на сервер? Почему?
102. В каком методе жизненного цикла компонента лучше делать подписку и отписку от листенера? Почему? Зачем отписываться?
103. Был ли опыт работы с контекстом? Когда его стоит использовать?
104. В чем особенность PureComponent?
105. Работали ли вы с мемоизоваными селекторами (memoized selectors)? Для чего их используют и какой принцип работы?
106. В чем видите преимущества библиотеки React?
107. Почему библиотека React быстрая? Что такое Virtual DOM и Shadow DOM?
108. Зачем в списках ключи? Можно ли делать ключами индексы элементов массива? Когда это оправдано?
109. В чем основная идея Redux?
110. Работа со стилями в React.
111. React - это библиотека или фреймворк? Какая разница между этими двумя понятиями.
112. Можно ли использовать jQuery вместе с React? Почему да / нет?
113. Что такое codemod?
114. Приходилось ли вам настраивать проект React с нуля? С помощью каких инструментов вы это делали?
115. Перечислите все библиотеки, которые использовали в связке с React.
116. Что самое сложное вам приходилось реализовывать с помощью React?
Ответы на некоторые из этих вопросов вы можете найти в видео курсах React Базовый и React Углублённый.
Back-end
117. Что такое REPL?
118. Что такое streams в Node.js?
119. Что такое middleware?
120. Для чего используют функцию setImmediate?
121. Зачем нужен app.param() в express?
122. Что такое token based authentication?
Базы данных
123. Напишите простой запрос для вычисления трех авторов, у которых больше всего книг.
124. Напишите запрос, который выбирает последние три комментарии для конкретного пользователя для двух таблиц: комментарии и пользователи.
125. Спроектируйте простую схему базы данных для библиотеки.
126. Для чего используют SQL-оператор HAVING?
127. Зачем используют SQL-оператор LEFT JOIN?
128. Чем отличается embed- от reference-связи в MongoDB?
129. В одном проекте программисты сохраняют данные в MongoDB-коллекции комментариев, используя такие типы данных (смотрите ниже). Что плохого в этом решении?
id: ObjectID
text: string
author_id: string
created_at: Date
130. В проекте понадобилось внести изменения в структуру таблиц, добавить несколько полей и индексы. Как программисты будут делать это на продакшене?
Ответы на некоторые из этих вопросов вы можете найти в видео курсе SQL Базовый.
Инструменты
131. Каждый раз, когда вы делаете pull, почему-то случается конфликт в последней строке во всех файлах, которые вы редактировали. Что происходит?
132. Что делает команда git fetch?
133. Какой git hygiene подходы вы знаете?
134. Что такое CI / CD? Для чего это нужно?
Практические задания
135. Расскажите, какие есть способы копирования простого объекта типа obj = {a 1, b 2, c 3}
136. Напишите deep clone для объекта.
137. Назовите различные способы, как поменять местами значения двух переменных.
138. Менеджер попросил в задаче поменять статусы из «active, inactive» на «active, removed», но в коде фигурируют только цифры и непонятно, какой статус соответствует какой цифре. Как помочь будущим программистам не лезть в документацию по коду? Вопрос ставят на конкретном примере с кодом.
139. Необходимо сделать мини проект - список пользователей с формой создания / редактирования пользователя:
Для хранения пользователей используйте Firebase (это бесплатно).
Для стилизации используйте Bootstrap.
Минимальный набор полей пользователя:
имя;
фамилия;
электронная почта;
телефон (в формате +380 (XX) XXX-XX-XX)
дата рождения;
будет плюсом - добавление аватара и возможность crop-картинки.
Пользователи должны иметь возможность фильтрации и пагинацию.
Проект должен содержать README-файл с шагами для запуска.
Middle
Общие
1. Расскажите о пирамиде тестирования.
2. Какие типы автоматизированных тестов выпадала возможность писать? Какие библиотеки при этом использовали? Каким инструментам отдаете предпочтение и почему?
3. Что такое unit-тесты? Какое место в пирамиде тестирования занимают unit-тесты?
4. Что такое code coverage? Обязательно 100% покрытие тестами кода?
5. Как запретить браузеру отдавать кэш на HTTP-запрос?
6. Что такое XSS (Cross-Site Scripting)?
7. Расскажите о паттернах Observer, Pub / Sub. Какая между ними разница? Приведите примеры реализации этих паттернов в известных фреймворках / библиотеках / браузерных API.
8. С какой целью может быть использован event listener события fetch self.addEventListener ( 'fetch', event => {})?
9. Что такое Event loop и как он работает? Расскажите о микрозадачах и макрозадачах.
JS Core
10. Какие типы данных бывают в JavaScript? Какой будет результат выполнения кода?
let firstObj = { name: 'Hello' };
let secondObj = firstObj;
firstObj = { name: 'Bye' };
console.log(secondObj.name);
11. Что такое temporal dead zone?
12. Как работает boxing / unboxing в JavaScript?
13. В чем разница между оператором in и методом hasOwnProperty?
14. Опишите, с помощью чего в JS реализуются такие ООП-парадигмы, как инкапсуляция, полиморфизм, абстракция?
15. Что такое прототип? Как работает прототипное наследование в JS? Объясните работу кода.
function Main () {}
Main.prototype = { protected: true };
const obj = new Main();
Main.prototype = { protected: false };
console.log('Object protection: ', obj.protected);
16. Какая разница между композицией и наследованием?
17. Почему не стоит использовать конструкторы типа new String?
18. Расскажите о базовом устройстве и механизме работы Event loop.
19. Что такое записи (records) и кортежи (tuples)? Чем они отличаются от обычных объектов?
20. Какие различия в поведении ES5 функции-конструктора и ES2015 класса?
21. Как реализовать паттерн «Модуль»?
22. Почему typeof null возвращает object?
23. Что такое приведение (преобразование) типов в JS?
24. Что такое явное и неявное приведение (преобразование) типов данных в JS? Как происходит преобразование типов в следующих примерах:
{}+[]+{}+[1]
!!"false" == !!"true"
['x'] == 'x'
25. Что такое Garbage Collector?
26. Опишите основные принципы работы «сборщика мусора» в JS-движках (engines).
27. Опишите назначение и принципы работы с коллекциями WeakMap и WeakSet? Чем они отличаются от коллекций Map и Set соответственно?
28. Чем отличается Observable от Promise?
29. Что такое Promise? Назовите порядок выполнения then и catch в цепочке.
Promise.resolve(10)
.then(e => console.log(e)) // ??
.then(e => Promise.resolve(e))
.then(console.log) // ??
.then(e => {
if (!e) {
throw 'Error caught';
}
})
.catch(e => {
console.log(e); // ??
return new Error('New error');
})
.then(e => {
console.log(e.message); // ??
})
.catch(e => {
console.log(e.message); // ??
});
30. Расскажите о последовательном и параллельном выполнении асинхронных функций. В чем разница между Promise.all() и Promise.allSettled()?
31. Что такое дескрипторы свойств объектов? Расскажите об их практическом применение.
32. Назовите несколько способов создания постоянного (неизменного) объекта в JavaScript.
33. Как создать свойство у объекта, которое нельзя будет изменить?
34. Зачем нужен конструктор Proxy? Приведите пример использования.
35. Что такое ArrayBuffer? В чем разница между Uint32Array и Float32Array? Каков результат выполнения кода?
const uint32Array = new Uint32Array();
Array.isArray(uint32Array);
36. Каким будет результат сравнения?
const url = “HTTPs://xyz.com/path<to>page.html”;
encodeURI(url) == encodeURIComponent(url);
37. Расскажите о генераторах и итераторах.
38. Объясните, что делает приведенный ниже код:
function * fn(num) {
for (let i = 0; i < num; i += 1) {
yield console.log(i);
}
}
const loop = fn(5);
loop.next();
loop.next();
39. Расскажите о типе данных Symbol и его практическом применении. Как перевести число с 10-разрядной системы в 16 (2,8) разрядную систему счисления?
Ответы на некоторые из этих вопросов вы можете найти в видео курсе JavaScript Стартовый (урок 3, урок 4, урок 13, урок 14) и JavaScript Базовый (урок 18, урок 19), ECMAScript 6 (урок 6).
Функции
40. Объясните, что означает currying. Приведите пример использования на практике.
41. Приведите пример функции с мемоизацией. Когда следует применять эту технику?
42. Что такое чейнинг функций? Напишите пример с использованием этого подхода.
43. В чем разница между function и arrow function? Каким будет результат выполнения кода?
const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
const unfold = (f, seed) => {
const go = (f, seed, acc) => {
const res = f(seed)
return res ? go(f, res[1], acc.concat([res[0]])) : acc
}
return go(f, seed, [])
}
Front-end
44. В чем принципиальная разница между событиями mouseleave и mouseout?
45. В каком порядке обрабатываются пользовательские события в DOM (click, mouseover и т .д.)? FIFO или LIFO?
46. Что такое Event bubbling и Event capturing?
47. Сравните методы объекта event stopPropagation и stopImmediateProparation.
48. Какие есть подходы оптимизации производительности веб-страницы?
49. Как реализован механизм same-origin policy в браузере? На какие браузерные API он распространяется?
50. Назовите способы хранения данных в браузере. Сравните их.
51. Web worker`ы. Опишите особенности передачи данных между worker`амы и основным потоком, между разделенными worker`амы.
51. Что такое Transferable-объекты?
52. Расскажите о способах оптимизации выполнения ресурсоемких операций JS для улучшения производительности рендеринга контента на странице.
53. Почему ResizeObserver вызывает события изменения размера до воспроизведения элемента, а не после?
54. Расскажите, как вы понимаете Web Accessibility?
55. Опишите алгоритм создания функционала, который обеспечивает чтение содержимого .txt файла при перетаскивании его из файловой системы в окно браузера.
56. Что такое Virtual DOM?
Ответы на некоторые из этих вопросов вы можете найти в видео курсе HTML5 & CSS3 Углубленный (урок 3), JavaScript Базовый (урок 1, урок 2, урок 3).
Верстка
57. Объясните разницу между единицами измерения px, em, rem.
58. Для чего нужны CSS-переменные? Приведите несколько примеров использования.
59. Что произойдет при добавлении следующего селектора?
* {Box-sizing: border-box; }
60. Как адаптировать страницу для печати?
61. Опишите особенности кастомизации стилей стандартных элементов форм.
62. Что такое progressive рендеринг? Какие подходы используются?
63. Назовите несколько способов реализации lazy-loading медиаресурсов на странице.
64. Назовите популярные шаблонизаторы для фронтенд-разработки. Опишите особенности их использования.
65. Назовите популярные CSS-методологии и их различия.
66. Как работает CSS Grid?
67. Какие форматы изображений поддерживают анимацию?
68. Как отследить прогресс / окончание CSS @keyframes анимаций или плавных переходов, реализованных с помощью transition, в JS?
69. Какие CSS-свойства могут быть обработаны непосредственно через GPU? Что такое композитные слои и почему большое их количество может привести к аварийному завершению работы браузера на мобильных устройствах?
70. Как переиспользовать Инлайн SVG-элементы на странице?
71. Опишите способы оптимизации SVG-файлов.
72. Как реализовать иконочный шрифт из определенного набора SVG-файлов?
73. Что такое ложное жирное или ложное курсивное (Faux) начертание шрифтов?
74. Что такое #shadow-root в инспекторе HTML-страницы?
75. Зачем нужны Custom Elements?
76. Почему удаление лишних символов пробелов / символов переноса в HTML не отражается на конечной производительности загрузки страницы?
77. Что такое контекст отображения canvas? Какие существуют типы контекста для рендеринга двумерной и трехмерной графики?
Ответы на некоторые из этих вопросов вы можете найти в видео курсе HTML5 & CSS3 Углубленный.
Angular
78. Как работает Dependency injection? Зачем это нужно? Расскажите об использовании кастомных инжекторов.
79. Что такое zone.js? Для чего Angular использует зоны? С какой целью можно использовать NgZone-сервис?
80. Как работает Change detection? Как можно оптимизировать компонент с помощью схем Change detection? Какие еще есть приемы для оптимизации рендеринга (связанные с Change detection)?
81. Как выполнить конфигурацию HTTP-сервиса? Зачем она нужна? Обработка HTTP-ошибок?
82. Какие есть подходы к организации работы с данными?
83. Как подготовить сборник к деплою?
84. Что такое NgRx? Когда стоит использовать?
85. В каких случаях лучше использовать Renderer-сервис вместо нативных методов? И наоборот?
86. Как работают и для чего нужны резолверы? Как получить данные, загруженные резолверами?
87. Как работают и зачем нужны динамические компоненты? Приведите примеры их целесообразного использования.
88. Какая разница между @ViewChild и @ContentChild?
89. Что делает код и как иначе можно связать класс компонента с переменной?
@HostBinding ( 'class.valid') isValid;
90. Как можно кэшировать данные, используя сервисы или RxJS?
91. Что такое асинхронная валидация форм? Когда применяется и как реализуется?
92. Зачем нужна forRoot-функция модуля?
93. Какая разница между декларированием и экспортом компонента из модуля?
94. Почему плохо «провайдить» сервис с shared-модуля в lazy-loaded модуль? (Вопрос о scope модулей.)
95. Что такое :: ng-deep и для чего используется?
96. Какие тесты можно запустить для Angular-программы? Какие инструменты используют для тестирования Angular-программы?
97. Как протестировать API-сервис?
Ответы на некоторые из этих вопросов вы можете найти в видео курсах Angular Базовый и Angular Углублённый.
React
98. Что такое JSX? Что лежит в его основе?
99. Как работает алгоритм Virtual DOM?
100. Для чего нужно свойство key во время рендеринга списков?
101. В чем разница между функциональными и классовыми компонентами?
102. Зачем и когда нужно передавать props в super() при использовании классовых компонентов?
103. Почему нужно использовать setState() для обновления внутреннего состояния компонента?
104. В чем заключается принцип «подъема состояния»?
105. Какие библиотеки менеджмента состояния React-приложения вы знаете? Зачем они нужны?
106. Когда следует использовать Redux? Какие есть альтернативы?
107. Redux vs Mobx?
108. Расскажите о базовом принципе работы React Hooks.
109. В чем разница между createRef и useRef?
110. Когда следует использовать React refs? Когда не стоит?
111. Какие недостатки библиотеки React видите?
112. Какие паттерны используете вместе с React?
113. Как относитесь к типизации вместе с React?
114. Как построить хорошую архитектуру React-проекта?
115. Оптимизация React-приложений? Как измерить производительность программы?
116. Можно ли приложение на React встроить в другое приложение на React?
Ответы на некоторые из этих вопросов вы можете найти в видео курсах React Базовый и React Углублённый.
Back-end
117. Почему Node.js однопоточный, а не многопоточный?
118. Что такое event driven development?
119. Сравните fork() и spawn() методы.
120. Расскажите о Node.js фреймворках, которые использовали. Какая между ними разница?
121. Опишите словам код ендпоинта, который должен сохранить с клиента файл размером 4 гигабайта и положить его на S3 или другой CDN.
122. Что такое микросервисы, зачем их используют?
123. В каких случаях вы бы выбрали монолит, а в каких - микросервисы?
124. Как понять, что приложение в определенный момент работает исправно?
125. Как понять, что приложение за последние три дня работал исправно?
126. Как происходит проверка правильности пароля при использовании bcrypt?
127. Что такое JWT?
128. Джуниор прислал код на ревью. Что здесь не так? Как исправить?
router.post ( '/ users', async (req, res, next) => {
const user = await db.createUser (req);
if (user) {
return res.json (users);
}
res.json ({error: "can not create user"})
})
Базы данных
129. Что такое Redis и для чего его используют?
130. Какие базы данных использовали? Какая разница между SQL и NoSQL?
131. Для двух таблиц - комментарии и пользователи - напишите запрос, который выбирает последние три комментария для каждого пользователя.
132. Я как заказчик прошу выбрать вас базу данных для нового проекта. Ваши действия?
Инструменты и другое
133. Для чего нужен package-lock.json?
134. В чем разница между npm install и npm ci?
135. Для чего нужны бандлеры?
136. Расскажите о модульном подключении скриптов. Приведите пример использования загрузчиков / бандлеров модулей.
137. Чем различаются git merge и git rebase?
138. Что такое staging area в git?
139. Опишите процесс code review. Назовите основные правила, способы разрешения конфликтов и споров во время его проведения.
Практические задания
140. Напишите функцию Sleep (ms), которая останавливает выполнение async-функции на заданный промежуток времени.
141. Реализуйте один из методов массива (например, splice).
142. Напишите функцию с RegExp для нахождения всех HTML-ссылок в строке.
143. Реализуйте функцию, которая исполнит callback для всех элементов определенной ветви DOM-дерева.
144. Реализуйте таблицу с виртуальным скролом.
145. Реализуйте функцию преобразования URL query строки в JSON.
const inData = "user.name.firstname=Bob&user.name.lastname=Smith&user.favoritecolor=Light%20Blue";
function queryObjectify(arg) {
// ??
}
queryObjectify(inData)
/* Результатом виконання для вхідного рядка, повинен бути наступний об’єкт
{
'user': {
'name': {
'firstname': 'Bob',
'lastname': 'Smith'
},
'favoritecolor': 'Light Blue'
}
};
*/
146. Реализуйте функцию нахождения пересечения двух массивов.
const first = [1, 2, 3, 4];
const second = [3, 4, 5, 6];
function intersection (a, b) {
// ??
}
intersection(first, second) // -> [3, 4]
147. Реализуйте функцию / класс для генерации HTML.
const HTMLConstruct = {};
HTMLConstruct.span('foo'); // -> <span>foo</span>
HTMLConstruct.div.span('bar'); // -> <div><span>bar</span></div>
HTMLConstruct.div.p(
HTMLConstruct.span('bar'),
HTMLConstruct.div.span('baz')
); // -> <div><p><span>bar</span><span>baz</span></p></div>
148. Если есть проект с ограниченными сроками и некритичной производительностью, чем будете руководствоваться при выборе библиотек, подходов? Или все же будете обращать внимание на производительность? Или наоборот: сроки нелимитированные, производительность важна. Ваши действия?
Senior
Общие
1. Расскажите о функциональном программировании.
2. Что такое TDD (Test Driven Development) / BDD (Behaver Driven Development)?
3. Расскажите подробно о работе HTTPS.
4. Какой стек технологий можно выбрать для реализации клона какого-нибудь известного проекту и почему?
5. Имеется проект на старых технологиях, необходимо в него вносить изменения. Как это сделать лучше всего?
6. Если у кандидата есть опыт работы с несколькими фреймворками: какой будете использовать для следующего проекта? Какие факторы будут влиять на выбор?
7. Что такое V8 Engine?
JS Core
8. Реализация паттерна Class Free OOP (HTTPs://observablehq.com/@bratter/class-free-oop).
9. Патерн async disposer (HTTPs://advancedweb.hu/what-is-the-async-disposer-pattern-in-javascript).
10. использование регулярных выражений. Когда приемлемо / неприемлемо? Как они работают? Как можно сделать читабельный код?
Front-end
11. Как браузер определяет, можем ли мы общаться между вкладками?
12. Что такое Content Security Policy?
13. Как избежать загрузки кэшированных файлов скриптов и стилей?
14. Что такое requestAnimationFrame?
15. Расскажите о микросервисной архитектуре Front-end App.
16. Что такое Shadow DOM?
17. Сравните nextElementSibling и nextSibling.
18. Какие знаете метрики веб-сайта?
Angular
19. Как проводится конфигурация NgZone-модуля? Когда это необходимо?
20. Что раздражает в фреймворке? Что бы вы изменили?
21. Если бы вы решали, что добавить в следующем релизе фреймворка, какая фича это была бы?
22. Писали ли вы кастомные декораторы? Если да, то зачем?
23. Сделать ревью кода и дать замечания по архитектуре.
24. Расскажите, как бы вы делали такие фичи. Опишите архитектуру фичи в приложении.
Back-end
25. Сравните Common.js с AMD Modules и ES6 Imports.
26. Какой фреймворк выбрали бы для бэкенда, почему?
27. Опишите своими словами, как работает OAuth v2.
28. Есть проект с источниками памяти, как их обнаружить, устранить и предотвратить это в будущем?
29. Есть проект с performance issues, как их обнаружить, устранить и предотвратить в будущем?
Базы данных
30. Какие альтернативные виды баз данных используете?
31. Что такое RDS и почему он иногда не подходит?
32. Что такое SQL Injections и как их избежать?
33. Почему для запросов в БД надо использовать плейсхолдеры?
34. Как спроектировать кластер на MongoDB?
35. Для чего используют MongoDB Aggregation framework?
36. Расскажите о GraphQL.
Инструменты
37. Можете ли вы описать суть методологии git flow в двух словах?
38. Что означает требование делать squash commits во время rebase?
39. Каково ваше мнение об альтернативных системы контроля версий (Version Control System)?
40. Какие конвенции знаете и используете для git?
41. Расскажите о своем опыте использования / внедрения CI / CD.
42. Необходимо настроить деплой проекту на несколько сред. Расскажите, как бы вы построили процесс? Какие инструменты использовали бы?
Практические задания
43. Реализуйте асинхронный метод filter для Array (должны работать await).
44. Реализуйте функцию reduce при помощи рекурсии.
45. Как можно было бы сделать toggle-компонент, как в iPhone, без использования JS?
Благодарим за помощь в подготовке статьи Вячеславу Колдовскому, Ивану Рыженку, Николаю Галкину, Александру Бурмистрову, Владу Балабашу, Андрею Шумаде, Ивану Кувацкому, Андрею Кладочному.
Що повинен знати FrontEnd розробник у 2021 році
Автор: Влад Сверчков
Верстка сайтов и веб-программирование привлекают большое количество новичков в мир IT. Это связано с достаточно низким порогом вхождения. Количество желающих стать фронтендщиком с каждым годом увеличивается, вследствии чего растут и требования к кандидатам.
Какие технологии необходимо изучить, чтобы стать FrontEnd разработчиком в 2021 году? Давайте разберемся.
HTML5 & CSS3
HTML5 и CSS3 — это фундаментальные технологии, без знания которых не обойтись ни одному веб-разработчику. С помощью языка гипертекстовой разметки HTML создается разметка (каркас) каждой интернет-страницы. Затем язык стилей CSS преображает сайт и придает ему привлекательный и эффектный внешний вид. Помимо этого, необходимо владеть:
кроссбраузерной адаптивной версткой, чтобы уметь создавать сайты под мобильные устройства, планшеты и широкоформатные экраны и для различных браузеров;
семантической версткой для повышения качества разметки и улучшения поисковой индексации сайта;
валидной версткой, которая предполагает полное соответствие кода разработчика всем стандартам W3C — организации, которая создает и внедряет технологические стандарты для World Wide Web.
Уделите особое внимание верстке под мобильные устройства, так как современный веб-потребитель очень много времени проводит в смартфоне. Существует даже специальный подход, при котором сначала верстается веб-сайт под мобильные устройства, а только потом под десктопы — называется Mobile First.
Это общие требования по верстке. Теперь же рассмотрим более детально требования конкретно по языку стилей. Здесь вы должны знать основные свойства CSS3: фоны, градиенты, тени, анимации, трансформации, переходы, а также технологии Flex и Grid, о которых мы еще поговорим.
Хорошее владение HTML и CSS уже позволяет заниматься версткой сайтов и зарабатывать деньги. Именно с этих двух базовых технологий начинается путь к профессии FrontEnd разработчика.
Качественно изучить HTML и CSS вы сможете при помощи следующих наших курсов:
HTML5 & CSS3 Стартовый;
HTML5 & CSS3 Базовый;
HTML5 & CSS3 Углубленный.
Flex и Grid CSS
Технологии верстки надежных адаптивных веб-страниц, которые позволяют легче создавать динамические сайты и удобнее структурировать их содержимое. Лучше всего Flex-верстку в действии показывает интерактивный сайт flexboxfroggy.com, а Grid-верстку - cssgridgarden.com.
На нашем ресурсе также есть курсы, которые хорошо объясняют темы Flex и Grid верстки: “Верстка сайта на CSS Grid”, “Верстка сайта на FlexBox CSS”.
Bootstrap 4
Популярная HTML/CSS платформа для разработки адаптивных веб-приложений, которую применяют при создании сайтов и интерфейсов администраторских панелей. Основные преимущества Bootstrap:
высокая скорость верстки;
кроссбраузерность и кроссплатформенность;
наличие хорошей документации, большого сообщества и огромного количества разнообразных обучающих материалов;
низкий порог вхождения (необходимо знать лишь основы HTML, CSS, JavaScript и jQuery).
Также, будет полезно знать еще 2 CSS-фреймворка: Foundation и Materialize. Первый является комплексным и профессиональным инструментом, который следует принципу Mobile First. Имеет продвинутый интерфейс и позволяет создавать действительно уникальные, элегантные и легко настраиваемые веб-сайты. Под эгидой Foundation были созданы такие веб-сервисы, как: Facebook, Mozilla, Adobe, Amazon, eBay и многие другие.
Materialize исповедует принципы Material Design от компании Google, которые преследуют идеи цифровой унификации для более легкого и комфортного восприятия интерфейса. На сайте material.io можно более детально ознакомиться с идеологией материального дизайна. Фреймворк Materialize незаменим при разработке несложного многостраничного веб-сайта или лендинга за счет богатых возможностей уже готовых и встроенных компонентов и стилей. Также, Materialize предоставляет разные компоненты и варианты поведения, обычно не встречающиеся в других фронтенд-фреймворках (поведение волн, scrollFire, scrollSpy, или специфичные для мобильных устройств выдвижные меню и всплывающие подсказки и т. д.).
Foundation подходит разработчикам с опытом, в то время, как Materialize — отличный выбор для начинающих девелоперов, которые хотят как можно плотнее познакомиться с материальным дизайном.
CSS препроцессоры
CSS препроцессор — это программа, которая имеет свой собственный синтаксис, но может сгенерировать из него CSS код. Самыми популярными считаются SASS, Stylus, LESS и PostCSS, однако, наибольшее комьюнити имеет именно SASS. Препроцессоры предназначены для:
ускорения процесса написания кода;
упрощения чтения кода и дальнейшей его поддержки;
минимизации рутинной работы при написании кода.
Для повышения эффективности написания CSS кода вполне достаточным будет изучение лишь одного препроцессора.
Git & GitHub
Git — наиболее популярная система контроля версий, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии.
Помимо этого, стоит уметь работать с сервисом онлайн-хостинга проектов, использующих систему контроля версий. В данном случае это GitHub. В тандеме с Git он позволяет разработчикам сохранять свой код онлайн, а затем взаимодействовать с другими разработчиками в разных проектах.
Данные системы позволяют команде программистов работать над одним проектом одновременно, сохраняя внесенные изменения, а также отслеживать выполнение задач каждым членом группы.
Git & GitHub — очень важные инструменты для любого IT-разработчика, изучением которых следует заняться как можно раньше.
Мы рекомендуем изучать Git на ITVDN при помощи курса “Основы работы с Git”.
Знания о веб-технологиях и сети интернет
Чтобы качественно выполнять свою работу, фронтенд разработчик должен разбираться в вебе и понимать принципы его функционирования. Таким образом, необходимо знать:
как работает интернет;
протоколы HTTP/HTTPS, веб-сокеты;
как работают браузеры;
что такое DNS и как он работает;
что такое доменное имя;
что такое хостинг.
Также, будет неплохо, если вы попробуете настроить сайт на каком-нибудь бесплатном хостинге, привяжете домен к этому хостингу.
JavaScript
Язык программирования, который используется как при разработке клиентской стороны веб-приложения, так и серверной. При помощи JavaScript (сокращенно — JS) можно писать даже настольные и мобильные приложения, используя определенные программные платформы и библиотеки. Этот язык позволяет:
динамически изменять разметку;
осуществлять интерактивное взаимодействие с пользователем;
анимировать изображения;
совершать валидацию форм;
управлять мультимедиа и т. д.
Другими словами, JavaScript “оживляет” страницу и добавляет ей функциональности. Хорошее владение данным языком программирования является обязательным для каждого FrontEnd разработчика.
Сергей Росоха, Software Architect с 11-летним опыта во FrontEnd/JS, отмечает важность изучения алгоритмов и структур данных на JavaScript:
“JavaScript давно уже используется не только для разработки динамических интерфейсов пользователя, но и для написания достаточно сложной бизнес-логики. Поэтому знание алгоритмов и структур данных становится критичным для JS-разработчиков. ” (источник)
JavaScript использует официальный стандарт ECMAScript (сокращенно - ES), который подразумевает определенное формальное описание синтаксиса, базовых объектов и алгоритмов. На данный момент существует множество различных версий ES. Работодатели чаще всего требуют знание ES6+.
Однако, вначале необходимо изучить чистый JavaScript и лишь потом вникать в новые стандарты. Как ни крути, а классику надо знать. Благодаря хорошему владению JS можно быстро разобраться в любой версии ES и затем освоить любой фреймворк или библиотеку.
ITVDN предоставляет возможность изучить JavaScript с нуля до продвинутого уровня при помощи курсов:
JavaScript Стартовый;
JavaScript Углубленный;
JavaScript: Расширенные возможности.
Линтеры
Инструменты, которые позволяют анализировать качество JavaScript-кода согласно определенному стандарту ES. Они встраиваются в среду разработки и указывают на наличие несоответствий стандарту в коде, если таковые имеются. Данный механизм полезен как для одиночной разработки (для самоконтроля), так и для командной, когда каждый разработчик должен следовать одним и тем же языковым конструкциям, дабы на выходе получить единый, целостный проект. Среди известных линтеров можно выделить ESLint и Prettier.
Тестирование
Jest, Cypress и Enzyme — главные инструменты модульного тестирования, которое возлагается на плечи разработчика. Но что это такое?
Unit тестирование (оно же — модульное тестирование) — процесс, который заключается в создании тестов для проверки работоспособности отдельных участков написанного программистом кода. Выполняется непосредственно автором кода.
Какую пользу приносит Unit тестирование:
существенное сокращение багов в коде;
упрощение рефакторинга кода;
обеспечение качественного отделения интерфейса от реализации;
лучшее понимание написанного кода;
возможность протестировать мельчайшие участки кода.
Все три инструмента учить не надо — достаточно научиться управляться лишь с одним из них.
Паттерны проектирования JavaScript
Это лучшие практики, которые описывают типичные способы решения распространенных задач, возникающих в ходе проектирования программного обеспечения. Знание шаблонов проектирования позволяет писать более чистый, понятный и читаемый код, а также избегать “изобретения велосипеда”. Более того, владение паттернами показывает вашу грамотность, как разработчика, и повышает вашу ценность в глазах работодателя, что поможет выделиться на фоне конкурентов.
Чтобы вы могли хорошенько разобраться с темой шаблонов в JavaScript, рекомендуем курс “JavaScript Шаблоны”.
Алгоритмы и структуры данных
Понимание алгоритмов и структур данных — обязательные знания для любого программиста.
К структурам данных относятся: стеки, очереди, связанные списки, графы и т. д. Изучив их, вы сможете управлять сложностью своих программ, делая их более доступными для понимания, а также разрабатывать высокопроизводительные программы, которые будут эффективно работать с памятью.
Знание алгоритмов позволит вам создавать сложные конструкции для эффективного решения широкого спектра задач. Когда говорят об алгоритмах, обычно имеют ввиду алгоритмы сортировки и поиска: сортировки прямым включением, прямым выбором, слиянием, пирамидальная, прямой поиск, бинарный, индексно-последовательный и другие.
Важно разбираться и в нотации Big O, которая описывает сложность каждого алгоритма. Данный механизм помогает определить, при каких условиях выгоднее использовать тот или иной алгоритм.
Отметим, что как новичку, вам не надо нырять вглубь этих тем. Будет достаточно теоретического владения, а также умения написать несколько алгоритмов. В разработке сайтов это не сильно нужно, но практически ни одно собеседование не обходит стороной тему шаблонов, алгоритмов и структур данных.
Фреймворки JavaScript
Это инструменты, с помощью которых создаются динамические веб/мобильные/десктопные приложения на языке JavaScript. Они ускоряют разработку веб-приложений и предусматривают четко структурированную организацию кода, повышая его качество и чистоту.
Самыми популярными фреймворками для фронтенд-разработки можно назвать Vue.js, React и Angular. Каждый из них предназначен для решения своего спектра задач и имеет различную степень сложности: Vue.js - самый легкий (но и с наименьшим сообществом), React - средней сложности, Angular - высокой сложности. Стоит сконцентрироваться на глубоком изучении одного фреймворка, но в то же время очень рекомендуется знать особенности и сферу применения всех вышеперечисленных технологий.
Какой фреймворк все же выбрать? Мнения на этот счет расходятся. Инструментарий выбирается индивидуально под проект и трудно предугадать, какие задачи вам нужно будет решать. На данный момент наибольшей популярностью пользуется React, поскольку он сбалансирован как с точки зрения сложности, так и с точки зрения богатства функционала. К тому же, наибольшее количество вакансий припадает именно на этот фреймворк, а значит, что он интересен не только разработчикам, но и бизнесу.
Каждый из фреймворков доступен для изучения на платформе ITVDN. По направлению Angular:
Angular 11.0 Базовый;
Angular Углубленный.
По направлению React:
React Базовый;
React Углубленный.
По направлению Vue.js:
Vue.js Стартовый;
Vue.js Базовый.
Инструменты управления состоянием приложения (State Management)
Большие веб-приложения постоянно растут в сложности, а потому хранить данные, которые могут использоваться в разных местах становится все сложнее. Для решения этой проблемы были придуманы отдельные библиотеки, идущие параллельно с фреймворками — они служат для управления глобальным хранилищем данных всего веб-приложения и называются менеджерами состояний. Их применение уже стало стандартом во FrontEnd разработке. Для девелоперов, которые используют Vue.js, это VueX, для React-разработчиков — Redux и MobX, для Angular-девов — RxJS, NgRx.
JavaScript Core (DOM, AJAX, JSON)
DOM (Document Object Model) - объектное представление исходного HTML-документа. Ключевым является понятие DOM-дерева, которое описывает структуру страницы. С помощью объектной модели JavaScript получает полную власть над HTML-документом: возможность редактировать, удалять и добавлять элементы и атрибуты HTML, менять CSS код и т. д.
AJAX (Asynchronous JavaScript And XML) - это синтез технологий JavaScript и XML, который фактически представляет собой комбинацию:
встроенного в браузер XMLHttpRequest-объекта (чтоб запрашивать данные с веб-сервера);
JavaScript и HTML DOM (чтобы отображать или использовать данные).
AJAX позволяет веб-страницам совершать асинхронное обновление, обмениваясь данными с веб-сервером. Благодаря этой технологии страница не нуждается в перезагрузке - обновляется лишь конкретная ее часть (вспомните ленту новостей в социальных сетях).
JSON (JavaScript Object Notation) - это общий формат обмена данными. Позволяет совершать обмен информацией между программными продуктами, написанными на разных языках. Таким образом, клиент, использующий JavaScript, может легко передавать данные на сервер, который реализован с помощью Ruby/Java/PHP.
Все три технологии являют особую ценность для каждого веб-разработчика и раскрывают организацию работы интернет-приложения.
БЭМ
“Блок, Элемент, Модификатор” — методология, предусматривающая компонентный подход к разработке веб-страниц, в основе которого лежит принцип разделения интерфейса на независимые блоки. Подход БЭМ позволяет повторно использовать существующий код в создании других страниц с сохранением всех его свойств (размеры, шрифт, цвет и т. д.).
Webpack
Мощный сборщик модулей, который позволяет скомпилировать в один файл несколько разных модулей. Используется во время работы над объемными проектами. Успешно применяется как во фронтенд-разработке, так и при создании бэкенд-приложений.
Gulp / Grunt
Системы сборки, которые автоматизируют рутинные задачи разработчиков: минификацию кода, оптимизацию изображений, тестирование, анализ качества кода и прочее. Подходят при разработке небольших проектов.
TypeScript
Кроссплатформенный строго типизированный язык, который является расширением JavaScript. Строгая типизация позволяет уменьшить количество потенциальных ошибок в исходном коде, написанном на TypeScript. Также, этот язык реализует концепции, которые близки объектно-ориентированным языкам, таким как C#, Java и подобным. TypeScript повышает скорость и удобство написания сложных комплексных программ, вследствии чего их становится легче поддерживать, масштабировать и тестировать. В большинстве случаев его необходимо изучать лишь тем, кто ориентирован на работу с фреймворком Angular.
SVG
Язык разметки масштабируемой векторной графики. Изображения на странице, сделанные с помощью SVG, корректно отображаются на экранах с различным разрешением, не теряя при этом своего качества, в отличии от традиционных растровых .jpeg, .png и других.
Английский язык
Знание английского языка является одним из основных требований к фронтенд-разработчику, поскольку большое количество полезной информации находится именно на англоязычных сайтах. Уровень чтения технической документации будет достаточным для комфортного пользования иностранными ресурсами.
Итоги
FrontEnd разработчик — достаточно универсальный боец в мире веб-разработки. Он должен уметь и верстать, и создавать логику работы клиентской части, и понимать работу серверной части веб-приложения. Для освоения такого обширного инструментария стоит запастись временем, терпением и упорством. Перечисленные в статье средства разработки сайтов также имеют аналоги, поскольку для решения разных задач подходят разные веб-инструменты. Однако мы выбрали самые популярные и эффективные из них.
Если у вас остались вопросы о последовательности и необходимости изучения тех или иных технологий, ответы вы можете найти в видео ”Как стать FrontEnd разработчиком?”, в котором подробно рассматриваются основные технологии создания клиентских веб-приложений.
Для тех, кто хочет стать FrontEnd разработчиком, на ITVDN создана комплексная программа обучения, которая включает в себя 42 видео курса.
Желаем вам успехов в достижении ваших целей!
Оставайтесь с ITVDN!
100+ питань з Python для Junior, Middle та Senior
Автор: Редакция ITVDN
Дорогие друзья! Предлагаем вашему вниманию перевод статьи, опубликованной на DOU.ua 30 сентября 2020 года. Оригинальная версия на украинском языке доступна по ссылке.
Редакция DOU пообщалась с разработчиками, которые проводят технические собеседования Python-специалистов для различных уровней, и собрала примерный список вопросов к кандидатам. Конечно, он не является исчерпывающим, однако содержит типичные вопросы.
Вопросы для Junior
От джуниоров требуют знать и уметь применять базовые структуры данных и модули, простейшие запросы к базам данных, знать простейшие команды системы контроля версий и тому подобное.
Общее по Computer Science и Web Development:
1. Что такое инженерия и процесс разработки в целом?
2. Какие знаете принципы программирования?
3. Чем отличаются процедурная и объектов-ориентированная парадигмы программирования?
4. Какие основные принципы ООП (наследование, инкапсуляция, полиморфизм)?
5. Что такое множественное наследование?
6. Какие есть шесть этапов разработки продукта в Software Development lifecycle и какая разница между Agile и Kanban?
7. Какие есть методы HTTP-запросов и какая между ними разница?
8. Как выглядят HTTP-request / response?
9. Что такое авторизация и как она работает?
10. Что такое cookies?
11. Что такое веб уязвимость?
12. Какие знаете классические базы данных?
13. Как читать спецификацию в конкретном языке (например, PEP8 в Python)?
14. Как происходит взаимодействие клиента и сервера?
15. Какие есть подходы к проектированию API?
16. Как использовать паттерны программирования?
17. Что такое Acceptance Testing и зачем его используют?
18. Что такое модульные и интеграционные тесты, API-тесты?
19. Как писать unit-тесты?
20. Какие есть best practices в написании автотестов?
21. Какие базовые команды системы контроля версий?
22. Как использовать Git?
23. В чем разница между хешированием и шифрованием?
Ответы на некоторые из этих вопросов вы можете найти в видео курсах Python Базовый, Python Углублённый, Основы работы с Git.
Python:
24. Python - интерпретируемый язык или компилируемый?
25. Какие есть меняющиеся и постоянные типы данных?
26. Что такое область видимости переменных?
27. Что такое introspection?
28. Разница между is и ==?
29. Разница между __init __ () и __new __ ()?
30. В чем разница между потоками и процессами?
31. Какие есть виды импорта?
32. Что такое класс, итератор, генератор?
33. Что такое метакласс, переменная цикла?
34. В чем разница между итераторами и генераторами?
35. В чем разница между staticmethod и classmethod?
36. Как работают декораторы, контекстные менеджеры?
37. Как работают dict comprehension, list comprehension и set comprehension?
38. Можно ли использовать несколько декораторов для одной функции?
39. Можно ли создать декоратор из класса?
40. Какие есть основные популярные пакеты (requests, pytest, etc)?
41. Что такое lambda-функции?
42. Что означает *args, **kwargs и как они используются?
43. Что такое exceptions, <try-except>?
44. Что такое PEP (Python Enhancement Proposal), какие из них знаете (PEP 8, PEP 484)?
45. Напишите hello-world сервис, используя один из фреймворков.
46. Какие есть типы данных и какая разница между list и tuple, зачем они?
47. Как использовать встроенные коллекции (list, set, dictionary)?
48. В чем заключается сложность доступа к элементам dict?
49. Как создается объект в Python, для чего __new__, зачем __init__?
50. Что знаете из модуля collections, какими еще built-in модулями пользовались?
51. Что такое шаблонизатор и как в нем выполнять базовые операции (объединять участки шаблона, выводить дату, выводить данные с серверной стороны)?
52. Как Python работает с HTTP-сервером?
53. Что происходит, когда создается виртуальная среда?
Ответы на некоторые из этих вопросов вы можете найти в видео курсах Python Стартовый (урок 2, урок 4-8), Python Базовый (урок 1, урок 6, урок 7, урок 9), Python Углублённый (урок 1, урок 4).
Базы данных:
54. Какие есть базовые методы работы с SQL- базой данных в Python?
55. Что такое SQL-транзакция?
56. Как сделать выборку из SQL-базы с простой агрегацией?
57. Как выглядит запрос, который выполняет JOIN между таблицами и к самим себе?
58. Как отправлять запросы в SQL-базу данных без ORM?
Ответы на некоторые из этих вопросов вы можете найти в видео курсе SQL Базовый.
Алгоритмы:
59. Что такое алгоритмы (например, Big-O notation)?
60. Какие есть базовые алгоритмы сортировки?
61. Что такое Bubble Sort и как это работает?
62. Что такое линейная сложность сортировки?
Вопросы для Middle
Если джуниору все надо подсказывать и помогать, то мидл может самостоятельно взять что-то новое и быстро его изучить и понять. У него накоплено достаточно знаний и опыта, чтобы быстро овладевать новым. Он может прийти и обсудить с опытным разработчиком, проконсультироваться, но окончательных решений не принимает.
Обычно у мидлов спрашивают:
63. Ориентируетесь ли в *nix, можете ли написать скрипты/автоматизацию для себя и коллег?
64. Что такое многопоточность?
65. Что такое архитектура веб сервисов?
66. Как работает современное нагруженное веб приложение (нарисовать и обсудить примерную архитектуру, например, Twitter или Instagram)?
67. Что нужно для сайта / сервиса среднего размера (redis \ celery \ кэш \ логирование \ метрики)?
68. Как написать, задеплоить и поддерживать (микро) сервис?
69. Как масштабировать API?
70. Як проводить Code review?
71. Что такое абстрактная фабрика, как ее реализовать и зачем ее применяют?
72. Что такое цикломатическая сложность?
Python:
73. Async Python: как работает, зачем, что под капотом?
74. Сравнить асинхронные web-фреймворки.
75. Что такое модель памяти Python?
76. Что такое SQLAlchemy (Core и ORM частей) и какие есть альтернативы?
77. Принципы работы и механизм Garbage collection, reference counting?
78. Как работает thread locals?
79. Что такое _slots_?
80. Как передаются аргументы функций в Python (by value or reference)?
81. Что такое type annotation?
82. Для чего используют нижние подчеркивания в именах классов?
83. Статические анализаторы: Flake8, Pylint, Radon.
Ответы на некоторые из этих вопросов вы можете найти в видео курсе Python Углублённый (урок 3).
Базы данных:
84. Разница между SQL и NoSQL?
85. Как оптимизировать SQL-запросы?
86. Какие есть уровни изоляции транзакций?
87. Какие есть виды индексов?
88. Точечные вопросы по выбору БД, движков БД?
89. Front-end: есть ли опыт работы с «современным» JS (Babel, Webpack, TS, ES)?
90. DevOps: работали ли с Docker-контейнерами, объяснить основные термины K8s (кластер, pod, node, deployment, service), что такое Kibana?
91. Алгоритмы: что такое временная сложность алгоритма (time complexity)?
92. Углубленные знания Linux: как зайти на внешний сервер, работать с пакетами, настроить среду и выполнять операции?
93. Специфично для Data Science: как работать с пакетами для обработки и визуализации данных (NumPy, Pandas и другие)?
Ответы на некоторые из этих вопросов вы можете найти в видео курсе SQL Базовый.
Вопросы для Senior
На собеседованиях с Senior`ами обычно мало говорят о теоретической стороне технологии, больше обсуждают конкретный опыт разработчика. Поэтому формализованных вопросов здесь нет. Однако, примером могут быть:
94. Что такое @property?
95. Каким образом можно запустить код на Python параллельно?
96. Как работать с stdlib?
97. Какие задачи решали с помощью метаклассов?
98. Что такое дескрипторы?
99. Знания других языков, кроме Python (опыт).
100. Какие технологические особенности реализации распределенных систем?
101. Какие есть низкоуровневые особенности языков и фреймворков?
102. Способы и методы управления памятью.
Бонус. Практические задания
1. Спроектировать клон Instagram. Это сервис, который понятен практически любому кандидату, даже если у него нет аккаунта. На высоком уровне он очень прост: картинки, описания, комментарии. Поэтому что-то минимальное сможет описать и джуниор. Если кандидат претендует на высшие позиции, можно бесконечно копать вглубь, касаясь API, тротлинга запросов, защиты от фрода, построения фидов пользователя и тому подобное.
2. Дано рекурсивное определение чисел Фибоначчи, надо написать функцию, которая реализует это определение.
3. Есть база данных из трех таблиц — стандартная many-to-many схема. Нужно написать запрос, который объединяет три таблицы и возвращает определенный результат.
4. Даем ТЗ какого-то полезного микросервиса (сокращалка url-ов, поиск дубликатов картинок, поиск тегов в текстах) или функции (rate limiter). Просим кандидата рассказать, как бы он его реализовал. Это дает возможность узнать, что привык использовать специалист, насколько глубоко он знает и понимает различные технологии.
5. Написать какой-то несложный декоратор (выводит аргументы функции на экран или, например, измеряет сколько времени выполнялась функция).
6. Junior`у можно предложить реализовать задачу FizzBuzz test.
7. Для Middle+ я люблю давать несложные задачки на рекурсию. Например, есть вложенный список чисел и нужно что-то на нем посчитать (скажем, найти максимум). Также, можно предложить написать аналог deepcopy для конкретной структуры данных (tree, graph).
8. Для Senior - игра «спроектировать за 5 минут...». Это может быть Google, FB, Twitter, высоконагруженный интернет-магазин, сервис поиска, продажи и бронирования билетов, сайт новостей и тому подобное. Такая задача помогает понять, как кандидат решает проблемы, ход его мыслей, умеет ли он отделять главное от второстепенного, понять, какого он типа ( «в глубину» или «в ширину»).
9. Игра «у юзера что-то не работает». На примере спроектированной системы собеседователь придумывает ошибку с «дикими симптомами», которую очень сложно понять, воспроизвести. Но нужно быстро решить проблему.
10. Задание, которое демонстрирует знание и понимание list и dict comprehensions.
Looking at the below code, write down the final values of A0, A1, ...An.
A0 = dict(zip(('a','b','c','d','e'),(1,2,3,4,5)))
A1 = range(10)
A2 = sorted([i for i in A1 if i in A0])
A3 = sorted([A0[s] for s in A0])
A4 = [i for i in A1 if i in A3]
A5 = {i:i*i for i in A1}
A6 = [[i,i*i] for i in A1]
A7 = [i if i%2 else 0 for i in A1 if 2 < i < 8]
','.join(str(j**2) for j in range(10)) – what is this object ?
11. Задача, в которой есть три функции, в них выполняются базовые операции (сортировка, фильтрация, поднесение массива к квадрату). Нужно упорядочить эти три функции в порядке возрастания времени, которое уходит на их выполнение.
Place the following functions below in order of their efficiency. They all take in a list of numbers between 0 and 1. The list can be quite long. An example input list would be [random.random () for i in range (100000)]. How would you prove that your answer is correct? - profiling?
def f1 (lIn):
l1 = sorted (lIn)
l2 = [i for i in l1 if i <0.5]
return [i * i for i in l2]
def f2 (lIn):
l1 = [i for i in lIn if i <0.5]
l2 = sorted (l1)
return [i * i for i in l2]
def f3 (lIn):
l1 = [i * i for i in lIn]
l2 = sorted (l1)
return [i for i in l1 if i <(0.5 * 0.5)]
То есть, на входе все функции имеют одинаковые данные, на выходе выдают одинаковый результат. Но из-за того, что внутри операции выполняются в разном порядке, время выполнения будет отличаться. Здесь нужно разбираться в алгоритмах и понимать, что происходит с твоими данными в процессе. Эту задачу может решить Junior, а может не решить и Middle. Казалось бы, такая мелочь, но когда мы работаем с большим количеством данных, важно, чтобы код был оптимизирован и программа выполнялась максимально быстро.
12. Простые задачи на статистику или логику. Например, определить угол между стрелками часов, которые показывают 8:40.
За подготовку материала редакция DOU выражает благодарность Михаилу Кашкину (Founder в Okumy и курсов по Python), Руслану Скире (Python Developer в CodeIT LLC), Бориславу Ларину (Python Developer в Prom.ua), Владимиру Обризану (Director в Design and Test Lab), Виктору Свирскому (Senior Developer в DataArt), Николаю Зорину (CTO в Jiji, проект Genesis), Владимиру Селюху (Team Lead в Prom.ua), Сергею Галабурде (Software Engineer в N-iX), Алексею Чуприкову (Lead Python Engineer в EPAM), Ивану Лучку (TL Data Science Specialist в Boosta), Олегу Новикову, Владимиру Щербинину, Роману Могилатову (Technical Leader в SoftServe), Вадиму Рудю, Натальи Кушнир, Андрею Лейцюсю, Роману Луцю и другим.
Перевел на русский язык Владислав Сверчков
Що таке адаптивна верстка і навіщо вона потрібна
Автор: Редакция ITVDN
Что такое адаптивная верстка?
Преимущества мобильного адаптивного дизайна
Почему адаптивный дизайн важен для бизнеса
Как создать адаптивный дизайн
Плавающая Сетка (Fluid Grid)
Гибкий текст и изображения
Медиа-запросы
Пользовательское тестирование адаптивных сайтов
Браузерное и устройство-зависимое тестирование на адаптивный дизайн
Вдохновение от других адаптивных сайтов
Будущее адаптивного дизайна для мобильных устройств
Является ли ваш сайт Mobile-Friendly?
Подводя итоги
От редакции ITVDN
Еще в 2015 году Google внедрил изменения в алгоритмы своей поисковой системы, которые теперь учитывают адаптированность сайта под мобильные устройства как важный пункт при ранжировании сайта. Дата была удачно названа Мобилгеддон (Mobilegeddon), как сравнение с Армагеддоном. Одно только такое введение требований от поисковиков к наличию мобильной версии сайта может оправдать важность адаптивного дизайна. Проще говоря, веб-сайт должен быть удобным для просмотра на смартфоне.
Требования к адаптивной верстке включают в себя такие элементы дизайна, как:
читаемый текст без необходимости его увеличения;
достаточное количество места для целей касания (tap targets);
отсутствие горизонтальной прокрутки.
На сегодня уже почти 4 миллиарда пользователей используют смартфоны для серфинга в Интернете.
Веб-сайты, не оптимизированные для всех небольших экранов смартфонов, имеют рейтинг в поисковых системах ниже тех, что выполнены адаптивно.
Более 50% поисковых запросов в Интернете теперь происходит с мобильного устройства.
Чтобы ваш веб-сайт мог работать с карманными устройствами (не создавая отдельное приложение), вам для начала стоит признать – адаптивная вёрстка важна для пользователей смартфонов.
Давайте рассмотрим более детально, почему и как это происходит.
Прежде всего ... а что такое адаптивная верстка и мобильный дизайн, и почему вы вообще должны о них заботиться?
Что такое адаптивная верстка?
Адаптивный веб-дизайн (RWD - Responsive web design) создает систему, позволяющую одному сайту (с одним URL-адресом и одним источником контента) реагировать и адаптироваться к размерам устройства пользователя. Адаптивный веб-сайт создан с использованием верстки с гибким макетом, который подстраивается под размеры экрана устройства.
По-сути, благодаря адаптивной верстке, ваш веб-сайт будет отлично выглядеть и хорошо работать как на настольном компьютере (или ноутбуке), так и на планшете, и в браузере мобильного телефона.
В прошлом разработчики создавали более одного сайта, для соответствия страниц экранам разных размеров. С учетом того, что на рынке сегодня представлено много типов устройств, это кажется совершенно неэффективным… верно?
Сам термин «адаптивная верстка» был фактически придуман в 2010 году веб-дизайнером Итаном Маркоттом. Сегодня адаптивная верстка в веб-дизайне уже не новая тенденция, а скорее проверенный временем способ мышления, стоящий за созданием сайтов.
На сегодня наличие адаптивного веб-сайта больше не является еще одной возможностью для развития вашей инфраструктуры — это уже необходимость!
Преимущества мобильного адаптивного дизайна
Преимущество адаптивного макета номер один— это получение гарантии того, что любой пользователь на любом устройстве будет иметь наилучшие возможности взаимодействия с контентом на вашем сайте.
Адаптивная верстка веб-сайта также является отличным способом улучшить контент на вашем сайте. Вы сможете убедиться, что те, кто использует мобильное устройство, видят всю важную информацию.
Благодаря особенностям алгоритма Google, адаптивный веб-дизайн повышает видимость сайта в поисковых системах, поскольку он удобен для просмотра на мобильных устройствах.
Сайт с качественным представлением контента на мобильном устройстве будет находиться в результатах поиска выше, чем сайт, хорошо отображающий контент только на десктопах.
Почему адаптивный дизайн важен для бизнеса
Расширяется охват клиентов благодаря захвату пользователей небольших устройств (планшетов и смартфонов);
Постоянный опыт работы с широкой аудиторией, который может увеличить количество потенциальных клиентов, продажи и конверсии;
Аналитика, отслеживание и отчетность по версиям сайтов для десктопов и мобильных устройств могут быть в одном месте;
Затраты времени и стоимость управления контентом снижается;
Более 60 % запросов в Google на конец первого квартала 2019 делаются с мобильных устройств.
Обратите внимание, что есть еще два способа, с помощью которых можно обеспечить взаимодействие пользователя с сайтом через мобильные приложения.
Первый называется динамическим показом (Dynamic Serving), в котором используется один и тот же URL-адрес, но разные коды HTML и CSS. Страницы распознают устройство, на котором они просматриваются, и предоставляют соответствующий код.
Второй способ — это вообще отдельный мобильный сайт. Когда пользователи посещают сайт с мобильного устройства, они отправляются на другой - мобильный URL-адрес. Вам следует выяснить, какой вариант лучше всего подходит для вашего присутствия в Интернете, прежде чем остановиться на одном.
Учтите, что на Google ежедневно приходится более 5,6 миллиардов поисковых запросов.
Рекомендуемая Google конфигурация для сайтов, оптимизированных для смартфонов, - это сайты с адаптивным веб-дизайном.
Google даже предлагает тест на адаптивность сайта под мобильные устройства, чтобы вы могли увидеть, насколько легко посетитель может использовать вашу страницу на мобильном устройстве. Вы просто вводите URL страницы и получаете оценку.
Как создать адаптивный дизайн
Как сделать адаптивную верстку? Есть несколько моментов, о которых стоит подумать при создании адаптивного макета. Это процесс, который требует определенной системы проектирования и иерархии контента среди различных устройств.
Три основных компонента адаптивного веб-дизайна включают в себя:
Гибкая (плавающая) сетка - fluid grid;
Гибкий текст и изображения;
Медиа-запросы.
Рассмотрим каждый из этих элементов детальнее.
Плавающая Сетка (Fluid Grid)
Сетка является ключевым элементом для создания адаптивного макета.
На сегодня сетки уже не являются чем-то новым. Веб-дизайнеры использовали сетки для создания веб-сайтов с самого начала. Однако в прошлом эти сетки имели фиксированную ширину и не позволяли поддерживать плавную компоновку.
Гибкая сетка, используемая для адаптивных веб-сайтов, обеспечит вам гибкость и масштабируемость дизайна. Элементы будут иметь постоянный интервал, пропорции и смогут настраиваться на определенную ширину экрана в процентах.
Гибкий текст и изображения
Способ отображения текста зависит от того, на каком устройстве пользователь просматривает ваш сайт. Однако текст должен оставаться читаемым, несмотря ни на что. На адаптивных веб-сайтах есть возможность увеличить размер шрифта и высоту строки (расстояние между каждой строкой текста) для удобочитаемости.
Гибкий текст и изображения настраиваются в пределах ширины макета, в соответствии с иерархией содержимого, заданной с помощью CSS (таблицы стилей). Текст на сайте с адаптивной версткой теперь может быть разборчивым независимо от устройства конечного пользователя. Благодаря гибкому контейнеру (внутри сетки) текст может переноситься с увеличением размера шрифта на небольших устройствах.
Гибкие изображения могут оказаться более сложными из-за времени загрузки в небольших браузерах устройств. Но эти изображения могут масштабироваться, обрезаться или исчезать в зависимости от того, какой контент необходим для мобильных устройств.
Медиа-запросы
Медиа-запросы - это код, который обеспечивает гибкость макета на адаптивных веб-сайтах. Медиа-запросы определяют код CSS, который будет применен соответственно, в зависимости от размеров и ориентации устройства (например, книжная ориентация iPhone или альбомная ориентация iPad и т. д.).
Медиа-запросы допускают существование несколько макетов дизайна, которые будут использовать одну и ту же HTML-кодированную веб-страницу.
Все три указанных элемента являются основой адаптивной верстки. Однако есть и другие важные средства, которые могут помочь определить акценты и усовершенствовать адаптивный веб-дизайн ваших сайтов для мобильных устройств.
Обратите внимание на:
Пользовательское тестирование адаптивных сайтов
Информация о том, как пользователи взаимодействуют с вашим сайтом, - бесценна и точно стоит того, чтобы заплатить за ее получение.
Существует множество способов провести пользовательское тестирование, чтобы получить максимально полезную обратную связь.
Такие сайты, как UserTesting.com, предоставляют пользователям тестирование за небольшую плату или бесплатно. Различные методы, такие как тестирование in-the-wild и карточная сортировка (Card Sorting), также могут помочь обнаружить неожиданные болевые точки и слабые места в использовании вашего продукта.
Браузерное и устройство-зависимое тестирование на адаптивный дизайн
Убедитесь, что ваш адаптивный дизайн и верстка совместимы со всеми соответствующими браузерами и сохраняет целостность вашего пользовательского опыта и дизайна.
Не полагайтесь только на изменение размеров окна браузера при тестировании адаптивного веб-дизайна для мобильных устройств. Попробуйте просмотреть сайт на как можно большем количестве физических устройств.
Вы будете удивлены тем, что можно обнаружить при переходе от одной операционной системы к другой, от одного устройства – к другому.
Вдохновение от других адаптивных сайтов
Точно также, как и выполняя любой другой дизайн-проект, обратитесь к опыту других людей. Найдите другие адаптивные веб-сайты, которые творчески обыгрывают концепцию адаптивного веб-дизайн.
Задумайтесь над следующими вопросами:
Какие веб-сайты или приложения вы часто используете на своем мобильном телефоне или других портативных устройствах?
Почему вы предпочитаете один сайт другим, которые могут предоставлять аналогичные услуги?
Предпочитаете ли вы использовать их на смартфоне или на настольном компьютере?
Поиск ответов на эти вопросы может помочь вам найти слабые места, которые вы, возможно, никогда не замечали, во время ежедневного использования своего вебсайта.
Будущее адаптивного дизайна для мобильных устройств
Мы знаем, что Google требует следующих оптимизированных элементов для эффективного взаимодействия с пользователями мобильных интерфейсов, используя адаптивный веб-дизайн:
Текст, с читаемым размером без необходимости его принудительного увеличения;
Контент, который умещается на экране устройства, без необходимости горизонтальной прокрутки;
Ссылки и кнопки, расположенные на достаточном расстоянии друг от друга, чтобы не было затруднений в работе с интерфейсом;
Разумное время загрузки страниц;
Не используйте Flash!
Эти правила адаптивной верстки очень важно соблюдать.
Рост числа мобильных устройств — это только начало перехода к более удобному использованию Интернета. Нужно быть уверенными, что пользователи могут просматривать ваш сайт в любом месте на любом устройстве, самые разнообразные мобильные носимые устройства становятся все более популярными.
Важным моментом будет учитывать современные размеры гаджетов, чтобы понимать в вашей адаптивной верстке какие разрешения учитывать. К примеру, на 2019 год все еще лидирующим остается разрешение экранов - 360х640.
Является ли ваш сайт Mobile-Friendly?
Пройдите тест Google, чтобы узнать, насколько адаптирован ваш сайт для мобильных устройств.
Ваш сайт получил зеленый свет? Отлично, значит вы прошли тест Google на адаптивность. Вы уже прочитали выше причины, почему адаптивный дизайн важен для пользователей вашего сайта.
Вместо зеленого видите большие красные иксы? Значит вам следует начать предпринимать определенные шаги для оптимизации работы вашего сайта под пользователей мобильных устройств.
Помните, что изменения в алгоритмах Google и требованиях к адаптивному дизайну в настоящее время мало учитывают планшеты, но, если вы сделаете ваш сайт полностью адаптивным - вы будете впереди тех конкурентов, которые этого еще не сделали!
Подводя итоги
Согласно требованиям сегодняшнего времени, ваш веб-сайт должен отлично выглядеть и хорошо работать как на настольном компьютере, так и на планшете, и в браузере смартфона. Адаптивный веб-дизайн может помочь вам достичь этого.
В этой статье мы ответили на общий вопрос «что такое адаптивный дизайн?». Есть три компонента адаптивного веб-дизайна: плавающая сетка, гибкий текст и изображения и медиазапросы.
Помните о важности адаптивного веб-дизайна для вашего бизнеса.
Выполнение вашего сайта по всем правилам адаптивной верстки поможет вам:
Увеличить охват потребителей на всех устройствах;
Поддерживать постоянный качественный пользовательский опыт, который увеличивает удержание аудитории на сайте;
Консолидировать данные аналитики, отслеживания и отчетности;
Сократить время и стоимость управления контентом;
Конкурировать в своей отрасли с другими брендами.
Google привлекает к коммерческим сайтам более 85% трафика мобильного поиска и рекомендует применять на ваших сайтах адаптивный дизайн. Поскольку адаптивный веб-дизайн удобен для мобильных устройств, он помогает улучшить видимость в поисковых системах, что, в свою очередь, может увеличить количество посетителей вашего сайта.
Увеличение трафика приводит к лучшей генерации потенциальных клиентов, дополнительным конверсиям и увеличению продаж - три основные причины, по которым вам нужен адаптивный веб-дизайн!
От редакции ITVDN
Мы с вами рассмотрели необходимость адаптивной верстки для каждого современного сайта. Такой подход является конкурентным преимуществом для компании из любой сферы бизнеса. Если говорить о разработчике, то навыки создания адаптивных web-сайтов будут существенным конкурентным преимуществом при поиске работы. Специальные знания и навыки вы можете получить, обучаясь по видео курсам ITVDN. В первую очередь это курсы:
HTML5&CSS3 Advanced
Практический курс по верстке лендинга
Создание адаптивного сайта с Bootstrap 3
Также вам могут быть интересны другие курсы и технологии, которые входят в программу обучения по специальностям Верстальщик сайтов и FrontEnd разработчик.
По материалам статьи за авторством Сони Грегори.
Тренди веб-розробки на 2019 рік
Автор: Софія Меренич
Готовы ли вы к внедрению инноваций в ваши веб-приложения в 2019 году? Представляем вам последние тренды веб-разработки, которым, безусловно, стоит следовать!
Стандарты веб-разработки часто меняются быстрее, чем их успевают внедрять. Чтобы всегда быть на шаг впереди, важно сосредоточиться на тенденциях, методах и подходах, которые только набирают популярность.
Мы проанализировали тренды в разных отраслях, чтобы сформировать этот окончательный список тенденций в веб-разработке на 2019 год. В качестве бонуса, вам также представлен топ лучших стеков веб-технологий, достойных вашего внимания в следующем году.
Не будем тратить время на долгие вступления. Все тренды здесь:
Голосовой поиск
В настоящее время мы наблюдаем начало эры голосового поиска. Каждый смартфон уже оснащен цифровым голосовым помощником (Siri для iPhone, Google Assistant для телефонов на базе Android). Более того, набирают популярность умные колонки с искусственным интеллектом.
В чем причина такого внимания к голосовым интерфейсам?
Простота использования.
Голосовое общение - это то, что нам не нужно изучать. Таким образом, дети и пожилые могут взаимодействовать с голосовыми интерфейсами без каких-либо сложностей в обучении.
Доступность.
Цифровые голосовые помощники уже стали привычной функцией смартфона. Интеллектуальные колонки пока не так распространены, но цена от 50 долларов - отличная предпосылка для экспансии.
К 2020 году ожидается, что 50% всех поисковых запросов будут осуществляться посредством голоса.
Внедрение голосового поиска сейчас является одной из основных тенденций в e-commerce. Тем не менее, это также применимо к любому другому бизнесу в Интернете. Если вы хотите, чтобы ваше веб-приложение было найдено, оптимизируйте его для работы с голосовым поиском как можно скорее.
Также мы рекомендуем рассмотреть возможность разработки собственного приложения для умных колонок. Это даст вам еще один канал для формирования лояльной аудитории и увеличения продаж.
WebAssembly
При создании веб-приложения производительность приложения обычно является компромиссом с кроссплатформенностью. Ограничения JavaScript делают тяжелые вычисления медленными, и это существенно влияет на производительность для пользователя. Именно поэтому большинство популярных игр и мощных приложений доступны только в качестве десктопного приложения.
Формат WebAssembly может быть применен, чтобы изменить эту ситуацию. Этот новый формат ориентирован на нативную производительность среди веб-приложений. С помощью WebAssembly, код на любом языке программирования может быть скомпилирован в байт-код, который запускается в браузере.
Код WebAssembly выполняется быстрее, чем код на JavaScript. В результате использования WebAssembly, вы сможете писать критически важные для приложения части на наиболее подходящем языке (C / C ++ / C # / Rust / Kotlin и т. Д.). WebAssembly сам позаботится о выполнении кода в браузере. Нативные приложения теперь можно запускать сразу в браузере. Это означает доступ к большему количеству пользователей, благодаря предложенной им сопоставимой с десктопной производительностью в сети без дополнительных затрат на разработку!
Основная проблема с WebAssembly заключается в том, что еще не все браузеры поддерживают его. Однако скоро это изменится.
Веб-приложения становятся более мощными с WebAssembly. Эту технологию определенно стоит попробовать.
Машинное обучение в веб-разработке
Технологии искусственного интеллекта, включая машинное обучение, уже давно влияют на наше поведение в Интернете, хотя, зачастую, это происходит незаметно для нас. Это основной момент применения машинного обучения – улучшение взаимодействия пользователя с приложением.
Машинное обучение - это способность программного обеспечения повышать производительность без непосредственного участия разработчиков. По сути, программное обеспечение анализирует входящие данные, выявляет закономерности, принимает решения и улучшает свою работу.
К примеру, компания Airbnb применила машинное обучение для настройки результатов поиска потенциальными гостями мест поселения. С помощью специфического алгоритма, компания хотела повысить вероятность того, что владелец жилья примет запрос от потенциального гостя. Алгоритмы машинного обучения должны были анализировать решения о принятии запросов каждого владельца. Пользуясь итогами такого анализа, компания смогла предоставить клиентам результаты поиска, которые стали полезными им с большей вероятностью. A / B-тестирование показало увеличение конверсии на 3,75%. В результате все запросы от пользователей Airbnb теперь обрабатываются в соответствии с этим алгоритмом, который повышает удовлетворенность клиентов и увеличивает доход.
Отличный пример внедрения, не правда ли? Но это еще не всё! Применение естественного языка и распознавания изображений могут улучшить общие впечатления пользователя от использования сервиса. Машинное обучение позволяет компьютеру правильно интерпретировать данные и принимать обоснованные решения. Машинное обучение уже используется в веб-приложениях в различных отраслях, таких как здравоохранение, финансы, образование, сельское хозяйство и т. д. Эта технология предлагает существенные усовершенствования, которые было бы трудно достичь без технологий ИИ.
Машинное обучение становится важной частью любого веб-сервиса. Важно, чтобы и вы попробовали найти применение для этой технологии в своих сервисах! Анализируйте поведение посетителей вашего веб-сайта и настраивайте под них отображаемый контент. Они никогда не узнают, что вы применяете к ним некий алгоритм, но их возросшая удовлетворенность контентом приведет к увеличению их вовлеченности и к увеличению конверсии! Машинное обучение может стать вашим секретным оружием, чтобы переиграть ваших конкурентов!
Безопасность данных
Чем больше данных обрабатывает ваше веб-приложение, тем больше оно привлекает внимание киберпреступников. Они стремятся нарушить работу ваших сервисов и украсть данные ваших пользователей или внутреннюю информацию компании. Это может дорого обойтись и вам, и вашей репутации.
Безопасность вашего веб-сервиса должна стать вашим главным приоритетом. Итак, чтобы сохранить пользовательские данные в 2019 году, следуйте этим советам:
Никогда не пренебрегайте тестированием безопасности.
Тестирование безопасности должно проводиться уже на этапе разработки, благодаря чему оно может предотвратить утечку данных. Каждое изменение в вашем веб-приложении должно быть явно протестировано.
Используйте инструменты мониторинга сайта.
Алгоритмы анализа поведенческих факторов помогут вам постоянно отслеживать все запросы, а также выявлять и квалифицировать подозрительные действия. Своевременное выявление угрозы позволит вашей команде вовремя среагировать и защитить веб-приложение от преступников.
Тщательно выбирайте сторонние сервисы.
Программное обеспечение SaaS (англ. software as a service — программное обеспечение как услуга, прим. переводчика) становится все более популярным, поскольку делает разработку приложений проще и быстрее. Однако вы должны убедиться, что поставщик услуг, с которым вы работаете, заслуживает доверия.
Шифрование конфиденциальных данных.
Даже если преступник сможет получить доступ к вашей базе данных, он не сможет извлечь какую-либо пользу из конфиденциальных данных, хранящихся там в зашифрованном виде.
Блокчейн в веб-разработке
Несмотря на то, что блокчейн утратил часть доверия к себе из-за нестабильности обменных курсов криптовалют, мы должны признать - эта технология уже бесповоротно вошла в нашу жизнь. И хотя эта технология впервые была применена в сфере настольных компьютеров - блокчейн уже уверенно проникает и в WEB.
Blockchain кошельки переместились с нативных настольных приложений в веб-приложения. Они идеально подходят для хранения небольших сумм криптовалют и предлагают улучшение удобства использования. Поскольку популярность веб-кошельков продолжает расти, вам следует рассмотреть и применение этой сферы технологий.
Другая реализация технологии блокчейна называется dapps или децентрализованные приложения. Уникальная особенность таких приложений - хранение логики сервера и базы данных в блокчейне. В результате ни одна организация не может контролировать приложение (например, Facebook, Google и т. д.).
Dapps изначально работали как настольные приложения. Но в настоящее время они тоже переходят в WEB. Во всем мире сеть стремится к децентрализации, поэтому популярность dapps, скорее всего, возрастет.
Ethereum, самая популярная платформа с открытым исходным кодом для блокчейн-проектов, выпустила библиотеку JavaScript web3.js. Эта библиотека позволяет легко разрабатывать клиентов, которые взаимодействуют с блокчейном Ethereum различными способами, такими как: создание интеллектуальных контрактов, запись и чтение данных из смарт-контрактов, передача криптовалюты между двумя учетными записями и многое другое.
Библиотека Web3 также доступна для других языков программирования, включая Python, Java, PHP, Swift, Scala и т. д. Таки образом создание децентрализованных приложений с удобными веб-интерфейсами становится проще.
Очевидно, что пик ажиотажа вокруг технологии блокчейна уже прошел. Но это значит только, что пришло время приступить к серьезной разработке мощных решений, которые смогут использовать большинство преимуществ этой технологии. Может быть, именно ваш проект станет следующим ньюсмейкером?
Прогрессивные веб-приложения (PWA) и ускоренные мобильные страницы (AMP)
Google отдает приоритет тем веб-приложениям, которые быстро загружаются на мобильных устройствах. Именно поэтому вам следует рассмотреть возможность внедрения PWA или AMP, которые являются уникальными технологиями, сокращающими время загрузки веб-страницы.
Прогрессивное веб-приложение (PWA) - это веб-страница, которая воспроизводит привычный мобильный интерфейс. Это технология работает быстро, может работать как постоянно онлайн, так и с плохим подключением к интернету, и является относительно дешевой. PWA поддерживает взаимодействие, позволяя пользователям наслаждаться высококачественными возможностями приложений, даже не осознавая, что они используют их через браузер. Приложения E-commerce являются частым примером использования этой технологии.
Ускоренная мобильная страница (AMP) работает только для статического контента, но загружается быстрее, чем обычный HTML. AMP пропускает все модные элементы и отображает только важную информацию - текст, изображения и т. д. Этот подход отлично подходит для блогов и новостных изданий.
Нужно ли вам применять PWA или AMP, зависит от вашего конкретного случая. Тем не менее, вам следует начать рассматривать эти технологии прямо сейчас. Наряду с улучшением качества предоставляемой услуги, у вас есть шанс значительно поднять свой рейтинг в результатах поиска.
Интернет вещей
Какие устройства вы в основном используете для доступа в интернет? Скорее всего, это ноутбук и смартфон. Тем не менее, сегодня подключаться к Интернету может гораздо большее количество устройств. Да, мы имеем в виду Интернет вещей или IoT, для краткости.
В настоящее время многие устройства оснащаются экраном. Благодаря такой тенденции, веб-приложения, оптимизированные для отображения данных на смарт-часах, холодильниках, интеллектуальных колонках и т. д., станут более востребованными.
Адаптированность к мобильным интерфейсам больше не является трендом, уже являясь обязательным элементом работы приложения. Тенденция 2019 года - адаптация веб-приложений для маленьких экранов.
Motion UI
Motion Design - один из главных трендов веб-дизайна будущего года. Минималистичный дизайн, в сочетании со сложными взаимодействиями, выглядит стильно и привлекает внимание пользователя.
Переходы в хедере страницы, удобные подсказки, анимированные диаграммы, фоновая анимация и модульная прокрутка. Эти, и многие другие элементы, помогут вам отобразить свой уникальный стиль и завлечь пользователя, улучшая поведенческие факторы и помогая вашему веб-приложению занять более высокое место в результатах поиска.
Стэк технологий для разработки веб-приложений
Крайне важно работать с последними проверенными технологиями. Таким способом вы сможете гарантировать, что разработанное программное обеспечение соответствует требованиям рынка и остается актуальным в течение нескольких лет. А вот и самые популярные технологии 2019 года:
Технологии front-end
Ангуляр
Впервые мы услышали об AngularJS в 2010 году. Уже через 6 лет, в 2016 году, фреймворк был полностью переписан и вышел под названием Angular 2. На конец 2018 года последней стабильной версией является Angular 7.
Angular - это фреймворк Model-View-Controller (MVC). Три отдельных компонента позволяют писать хорошо структурированный и простой в поддержке код. Двунаправленная привязка данных удобна для простых приложений - любые изменения в модели будут немедленно внедрены в представление и наоборот. Однако если вы работаете над сложным проектом, однонаправленная привязка данных сэкономит ваше время и ресурсы.
Чтобы использовать Angular максимально эффективно, вам придется использовать Typescript. Вам также следует помнить, что фреймворк работает только с обычным DOM, что создает некоторые ограничения.
Стек MEAN – является одним из самых популярных. Он включает в себя:
MongoDB - база данных;
Express.js - веб-фреймворк;
Angular – фронтэнд фреймворк;
Node.js – бэкенд.
Очевидным преимуществом этого стека является то, что все его компоненты используют JavaScript. В результате собрать команду разработчиков (или нанять одного разработчика full-stack JavaScript) не будет проблемой.
React.js
В описанном стеке Angular часто заменяется на React - библиотеку Javascript. Стек MERN является относительно молодым, но растущая популярность React поспособствовала быстрому росту его популярности.
React превосходит по своим возможностям Angular благодаря виртуальному DOM, который позволяет быстрее и проще вносить изменения. Однако, поскольку React является библиотекой, а не фреймворком, что ограничивает основные функциональные возможности, разработчикам приходится работать со сторонними сервисами.
Также стоит упомянуть, что React использует JSX - модификацию JavaScript, которая обеспечивает бесшовную совместимость компонентов. Таким образом, знание JSX является предпочтительным, если вы хотите максимально использовать стек MERN и особенно React.
Vue.js
Vue.js является более молодым JS фреймворком, но за последние несколько лет он продемонстрировал невероятный рост популярности. Частично это связано с тем, что это облегченное решение. По сравнению с монолитом, подобным Angular, он предлагает только базовую функциональность «из коробки». Используя сторонние сервисы, эта функциональность расширяется. В результате нет необходимости обрабатывать избыточный код, как в случае с Angular.
Как вы, вероятно, догадались, Vue.js также используется вместе с MongoDB, Express.js и Node.js как часть стека MEVN.
Технологии Back-end:
Как правило, сложно выбрать между пользовательской конфигурацией бэкенд разработки и backend-as-a-service. Оба варианта имеют свои плюсы и минусы, и выбор зависит от деталей проекта. Мы не будем сейчас вдаваться в подробности, так как существуют отдельные статьи, сравнивающие mBaaS и пользовательский бэкенд - ознакомьтесь с ними, чтобы узнать больше по этой теме. Здесь мы рассмотрим самые популярные решения для пользовательского бэкенда.
Node.js
Node.js является важным компонентом всех вышеописанных стеков веб-разработки. Это среда выполнения приложений, которая используется для создания приложений на стороне сервера. Работа с Node.js требует знания JavaScript. По этой причине он часто используется в стеках вместе с инфраструктурой внешнего интерфейса JS.
Django
Django - это веб-фреймворк Python. Он может использоваться в основном с любым фронтенд фреймворком (включая описанные выше). Он также является хорошим решением для любых типов веб-сайтов из-за множества доступных сторонних пакетов. С ростом популярности Python стоит рассмотреть Django для серверной части вашего веб-приложения.
Laravel
PHP - широко используемый язык программирования бэкенда, а Laravel - один из самых популярных PHP фреймворков.
Laravel отлично работает с Vue.js. Тем не менее, Angular и React также хорошо подходят для разработки веб-приложений с Laravel.
Заключение
Попытки угнаться за последними трендами могут показаться излишне сложными, так как тренды меняются очень быстро. Но почему бы не попробовать?
Следуя последним тенденциям в веб-разработке, вы сможете порадовать своих пользователей контентом мирового уровня, повысить рейтинг ваших веб-приложений и открыть для своих услуг новые рынки!
В течение следующих нескольких лет голосовой поиск укрепит свои позиции и заставит поставщиков услуг адаптироваться к новой реальности. Подходя к этому с умом, вы можете оказаться в числе первых компаний, которые обращаются к вашим клиентам с помощью голосового поиска. Звучит заманчиво, не правда ли?
Безопасность пользовательских данных уже давно вызывает сомнения. Это проблема, которой нельзя пренебрегать, если вы хотите быть лидером рынка.
Блокчейн - это технология со многими приложениями в веб-разработке, так почему бы не исследовать ее возможности на ранней стадии ее появления?
Говоря в общем, каждый тренд 2019 года заслуживает вашего внимания. Некоторые из них будут актуальными в течение нескольких лет, а некоторые станут обыденностью уже через несколько месяцев. Так что не стесняйтесь начинать реализовывать их как можно скорее.
Автор: София Меренич, технический и бизнес писатель.
Источник