В рамках сегодняшней статьи я рад представить новый экспериментальный проект от команды ASP.NET под названием Blazor. Что такое Blazor? Blazor – это экспериментальный веб UI – фреймворк на базе C#, Razor и HTML, который работает непосредственно в браузере посредством WebAssembly. Цель эксперимента – в значительной мере упростить задачу построения простых и качественных одностраничных приложений, которые могут быть запущены в рамках любого браузера. Достигается это за счет написания .NET веб-приложений, которые при помощи открытых веб-стандартов могут запускаться на стороне клиента. В случае если вы уже работаете с .NET, подобный подход открывает перед вами следующие перспективы: вы сможете использовать навыки разработки браузерных приложений в дополнение к существующим сценариям серверных, облачных, нативных и игровых приложений. Однако, даже если вы непосредственно с .NET не знакомы, мы надеемся, что Blazor подтолкнет к его изучению. Зачем использовать .NET для браузерных приложений? Хотя веб-разработка за прошедшие годы значительно упростилась, создание современных веб-приложений - задача далеко не всегда тривиальная. Построение же веб-приложений на базе .NET предоставляет уникальную возможность улучшить качество написания подобного рода программ. Среди основных преимуществ стоит выделить: Стабильность и целостность: инструменты стандарта .NET на протяжении многих лет зарекомендовали себя в качестве надежных помощников при разработке приложений. Современные инновационные языки: с использованием C# и F# процесс создания программ, по сути, становится чем-то вроде развлечения, настолько широким спектром возможностей эти языки обладают. Популярная среда разработки: стек IDE Visual Studio обеспечивает максимальное удобство работы с Windows, Linux и macOS. Быстрота вычислений: .NET обладает длинной историей по улучшению производительности, надежности и защиты веб-приложений для серверов. Соответственно, при разработке full-stack .NET приложений все указанные преимущества также ощущаются. Browser + Razor = Blazor! Blazor базируется на существующих веб-технологиях, таких как HTML и CSS, но в этом случае для создания UI-элементов вы используете C# и Razor – синтаксис вместо JavaScript. Однако отметьте, что это не то же самое, что и деплой существующего проекта UWP или Xamarin в браузер. Blazor будет обладать всеми ключевыми особенностями современных веб-фреймворков, включая: Компонентную модель для построения комплексных UI Маршрутизацию Слои Формы и валидацию Внедрение зависимостей Поддержку JavaScript Перезагрузку в браузере во время разработки «вживую» Рендеринг на стороне сервера Полноценную поддержку .NET – отладки (как в браузере, так и в IDE) IntelliSense и прочие различные инструменты Возможность запускать более старые (не WebAssembly) браузеры через asm.js Публикацию и мониторинг размера приложения Изменения WebAssembly Запуск .NET – приложений в браузере стал возможен благодаря WebAssembly, новому веб-стандарту для «портативных, умеренных в размерах и быстрых» веб-приложений. Таким образом, WebAssembly вводит фундаментально новый способ построения веб-приложений, так как код, скомпилированный под WebAssembly, не уступает скорости нативных .NET-приложений. Никаких прочих сторонних зависимостей нам не нужно: вы можете запустить обычные .NET-сборки в браузере с использованием WebAssembly. В августе прошлого года наши друзья из команды Xamarin Microsoft анонсировали планы по созданию Mono .NET специально для браузеров с использованием все той же WebAssembly. По сути, Blazor частично базируется на результатах их работы. Новый эксперимент Сейчас мы восхищаемся возможностями Blazor-технологии, но не стоит забывать, что сейчас это лишь экспериментальная технология, а не официально выпущенная и готовая для полноценной работы. На этой стадии мы можем более глубоко ознакомиться с основными функциональными возможностями представленной технологии, а также выразить свои замечания и пожелания разработчикам. Я хочу попробовать! Найти технологию вы можете в Blazor repo, который сейчас доступен для использования. Это проект с полностью открытым исходным кодом: все текущие изменения и дополнения могут быть отслежены в вышеупомянутом репозитории. Пожалуйста, отметьте, что технология находится в статусе раннего доступа. Здесь еще нет никаких инсталляторов или шаблонов проектов, кроме того, многое из заявленного еще не реализовано. Даже то, что уже сделано, не оптимизировано. Если вам интересно, вы можете загрузить репозиторий, построить его и протестировать, но пытаться на его базе разработать рабочий проект – задумка явно не удачная. Что же касательно предложений и поддержки, вы можете использовать issue tracker репозитория. Через месяц мы планируем выпустить первые черновые версии заготовок веб-проектов и инструментов, сделав технологию более доступной для широкой аудитории. Автор перевода: Евгений Лукашук Источник

Моя идея состояла в том, чтобы построить простой репликабельный проект на Angular с бэкэндом на Django. Я искал и не смог найти нужных решений, пришлось во всем разбираться самому. В итоге я разобрался и решил сам написать гайд для всех, кого может заинтересовать данная проблема.  Данная статья поможет вам построить простое приложение Angular с бэкэндом на Django, организованного с помощью Webpack. Проблема Я хочу настроить проект на Angular 1.1.x и скормить ему данные с сервера Django. Мне бы хотелось использовать Django REST Framework (DRF), чтобы пострить RESTful API. Я также хочу сбандлить JS ассеты. Сейчас я собираюсь запустить сайт на одном сервере. Предварительные требования Python 2.x Django 1.9.x npm 2.15.8+ Webpack 1.13.x (sudo npm i -g webpack) ESLint 2.13.1+ (sudo npm i -g eslint) NodeJS 4.4.7+ Содержание Скаффолдинг проекта. Создайте свои начальные директории. Скаффолдинг проекта на Django. Настрока переменных среды, нужных для запуска сервера Django. Установка Django REST Framework и настройка Django с использованием переменных среды. Создание API. Запуск Django сервера с использованием dev settings. Инициализация npm-пакета и установка front-end JS зависимостей. Создание Angular entry-point и загрузка начальных зависимостей. Настройка Webpack'а. Дайте команду Django загрузить приложение. Создайте шаблон базы приложения Angular. Напишите компонент home. Напишите Angular роуты, ведущие к вашему компоненту home и странице 404. Добавьте директивы ангуляр-маршрутизатора к шаблону входной точки приложения. Проверьте ваше REST API в приложении Angular.  Шпаргалка. Итак, начнем! 0. Настройте среду для Python. mkvirtualenv mysite 1. Скаффолдинг проекта на Django. Создайте начальные директории. Мы хотим сфокусироваться на модулярности в ходе разработки. Следовательно, существует множество директорий в конечном итоге использования. Мы хотим, чтобы наше дерево изначально выглядело так: mysite ├── backend │ ├── docs │ ├── requirements └── frontend ├── app │ ├── components │ └── shared ├── assets │ ├── css │ ├── img │ ├── js │ └── libs ├── config ├── dist └── js  Сделайте следующее: mkdir mysite && cd mysite mkdir -p backend/docs/ backend/requirements/ \ frontend/app/shared/ \ frontend/app/components/ \ frontend/config \ frontend/assets/img/ frontend/assets/css/ \ frontend/assets/js/ frontend/assets/libs/ \ frontend/dist/js/  *Примечание: Структура этого проекта была навеяна опытом с несколькими другими проектами. Я считаю эту организацию идеальной, но вам не обязательно ей следовать. Но, пока вы читаете этот гайд, вы должны придерживаться этой структуры. 2. Скаффолдинг проекта на Django. В директории backend/ создайте Django проект: python django-admin.py startproject mysite  Также создайте requirements.txt: pip freeze > requirements/requirements.txt В директории (вашего проекта) backend/mysite/ произведите скаффолдинг директории, той, где будет жить ваше API: mkdir -p applications/api/v1/ touch applications/__init__.py applications/api/__init__.py \ applications/api/v1/__init__.py applications/api/v1/routes.py \ applications/api/v1/serializers.py applications/api/v1/viewsets.py Теперь создайте структуру директории настроек: mkdir -p configlord/settings/ touch configlord/settings/__init__.py \ configlord/settings/base.py configlord/settings/dev.py configlord/settings/prod.py \ configlord/dev.env configlord/prod.en 3. Настройте переменные окружения, которые нужны для запуска сервера Django. На этом этапе я предпочитаю пользоваться django-environ для работы с переменными окружения. Существует множество способов сделать это, но пакет django-environ чрезвычайно упрощает этот процесс, поэтому я использую его во всех своих проектах. Установите django-environ: pip install django-environ  В mysite/dev.env добавьте следующее: DATABASE_URL=sqlite:///mysite.db DEBUG=True FRONTEND_ROOT=path/to/mysite/frontend/ SECRET_KEY=_some_secret_key Мы собираемся использовать эти переменные среды в наших настройках. Выгода от использования наших переменных окружения в отдельных файлах состоит в основном в том, что такая настройка позволяет облегчить переключение между средами. В нашем случае файл the dev.env является списком переменных, которые мы бы использовали в локальной среде разработки. *Примечание: SECRET_KEY можно взять из settings.py, который был сгенерирован django-admin.py startproject. 4. Установите Django REST Framework и настройте Django, используя переменные среды. Установка DRF: pip install djangorestframework Наполните settings/base.py  следующим: Укажите, где искать переменные окружения. import environ project_root = environ.Path(__file__) - 3 env = environ.Env(DEBUG=(bool, False),) CURRENT_ENV = 'dev' # 'dev' is the default environment # read the .env file associated with the settings that're loaded env.read_env('./mysite/{}.env'.format(CURRENT_ENV)) Установите базу данных. В данном случае мы собираемся использовать встроенные в django-environ настройки SQLite. DATABASES = { 'default': env.db() } Установите SECRET_KEY ,а также debug. SECRET_KEY = env('SECRET_KEY') DEBUG = env('DEBUG') Добавьте DRF в пул приложений, которые Django должен использовать. # Application definition INSTALLED_APPS = [ ... # Django Packages 'rest_framework', ] Ссылки будут «жить» в специальном URL модуле, созданном с помощью базы проекта. ROOT_URLCONF = 'mysite.urls' Укажите Django, где искать все шаблоны и другие статические ассеты. STATIC_URL = '/static/' STATICFILES_FINDERS = [ 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder', ] STATICFILES_DIRS = [ env('FRONTEND_ROOT') ] TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [env('FRONTEND_ROOT')], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] В соответствии с настройкой TEMPLATES Django должен будет искать шаблоны внутри frontend/ directory. Это то, где Angular приложение будет жить. Мы используем только Django, чтобы обслужить шаблон, внутри которого Angular приложение будет загружаться, которое будет выполнено через entry-point директиву. Если вы не знаете, о чем я, продолжайте чтение...  Наполните settings/dev.py: from mysite.settings.base import * CURRENT_ENV = 'dev' Здесь мы указываем, что этот файл настроек унаследывает настройки из base.py и переопределяет строку CURRENT_ENV, найденную в base.py. Мы говорим: «Используй это значение вместо значения, найденного в наследуемом модуле». 5. Создайте API. Нам нужно нечто, с помощью чего мы сможем протестировать службы Angular, поэтому давайте создадим небольшое API. Этот шаг можно пропустить, но я не советовал бы делать этого. Нам важно знание того, что настройки приложения Angular работают исключительно с точки зрения его потенциала, чтобы облегчить HTTP запросы. Сгенерируйте приложение. manage.py startapp games Создайте модель в games/models.py. class Game(models.model): title = models.CharField(max_length=255) description = models.CharField(max_length=750) Создайте DRF сериализатор для модели игры в  applications/api/v1/serializers.py. from rest_framework.serializers import ModelSerializer from applications.games.models import Game class GameSerializer(ModelSerializer): class Meta: model = Game Создайте  DRF viewset для модели в приложениях applications/api/v1/viewsets.py. from rest_framework import viewsets from applications.games.models import Game from applications.api.v1.serializers import GameSerializer class GameViewSet(viewsets.ModelViewSet): queryset = Game.objects.all() serializer_class = GameSerializer В applications/api/v1/routes.py зарегистрируйте роуты, используя DRF's router registration features. from rest_framework import routers from applications.api.v1.viewsets import GameViewSet api_router = routers.SimpleRouter() api_router.register('games', GameViewSet) Обозначьте ссылки для зарегистрированного DRF роута внутри mysite/urls.py: from django.contrib import admin from django.conf.urls import include, url from applications.api.v1.routes import api_router urlpatterns = [ url(r'^admin/', admin.site.urls), # API:V1 url(r'^api/v1/', include(api_router.urls)), ] 6. Запустите сервер Django, используя dev settings. manage.py runserver --DJANGO_SETTINGS_MODULE=mysite.settings.dev Впуская DJANGO_SETTINGS_MODULE в runserver, мы «говорим» - работать используя специфические параметры. Если все работает, у вас появится возможность открыть localhost:8000/api/v1/games и увидеть ответ от DRF. Если все работает – самое время заняться построением приложения Angular. Если нет – направьте автору проблему. Если вы застряли на этом этапе – оставьте комментарий автору под оригиналом публикации. 7. Инициализируйте npm-пакет и установите front-end JS зависимости. Приложение Angular не будет работать так, как мы хотим, если правильные зависимости не будут установленны. Самое время установить базовые пакеты, которые понадобятся. Инициализируйте npm-пакет. Прямо из  frontend/ запустите npm init --yes By passing the --yes flag into init, you're telling NPM to generate a package.json using NPM defaults. Otherwise, if you don't pass that in, you'll have to answer questions... Boring. Установите dev dependencies.  npm install --save-dev eslint eslint-loader Установите общие зависимости. npm install --save eslint eslint-loader angular angular-resource angular-route json-loader mustache-loader lodash Файл package.json file во frontend/ должен выглядеть приблизительно следующим образом: { "name": "my-app", "version": "0.0.1", "description": "This is my first angular app.", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "eslint": "^3.1.1", "eslint-loader": "^1.4.1" }, "dependencies": { "angular": "^1.5.8", "angular-resource": "^1.5.8", "angular-route": "^1.5.8", "eslint": "^3.1.1", "eslint-loader": "^1.4.1", "json-loader": "^0.5.4", "lodash": "^4.13.1", "mustache-loader": "^0.3.1" } } Здесь то, что мы только что установили: eslint – отличный линтер, благодаря которому код JavaScript будет в порядке (последователен). eslint-loader – для запуска eslint через Webpack. Чуть позже я объясню концепцию «загрузчиков». angular -  MVC фреймворк. Если  вы не знали об этом, стоит подумать о том, чтобы закрыть эту страничку прямо сейчас. angular-resource -  (Angular) HTTP библиотека выбора. Это абстракция $http. json-loader - загрузчик (снова, используемый Webpack) для распаковки JSON из .json файлов с помощью require() во время работы нашего приложения. mustache-loader – загрузчик, который мы будем использовать, чтобы парсить наши mustache шаблоны. Mustache шаблоны – это веселье. Я могу спокойно предположить, что вы не знаете, как все эти пакеты заиграют вместе.  Не переживайте, братишки. 8. Создайте entry-point в Angular, объявите начальные зависимости, объявите первоначальные глобальные переменные. В frontend/app/app.js добавьте следующее: /* Libs */ require("angular/angular"); require("angular-route/angular-route"); require("angular-resource/angular-resource"); /* Globals */ _ = require("lodash"); _urlPrefixes = { API: "api/v1/", TEMPLATES: "static/app/" }; /* Components */ /* App Dependencies */ angular.module("myApp", [ "ngResource", "ngRoute", ]); /* Config Vars */ // @TODO in Step 13. /* App Config */ angular.module("myApp").config(routesConfig); app.js это то, где Webpack будет искать модули, чтобы бандлить их вместе. Лично я ценю такую организацию и методику вызовов, но такой порядок не обязателен. Существует 6 секций: Libs – главные библиотеки, используемые на протяжении работы Angular приложения; Globals – зарезервированные глобальные переменные, которые мы можем использовать во время работы приложения; Components (Компоненты) – особенные модули проекта; App Dependencies (Зависимости приложения) – объявление входной точки приложения и его зависимостей; Config Vars – переменные, где хранятся настройки, такие как route config; App Config - вводит configs (настройки) в приложение, используя сохраненные из предыдущей секции. Для того, чтобы globals работали, вам следует указать ESLint на то, какие из переменных - глобальные. В config/eslint.json добавляем следующее: { "env": { "node": true }, "extends": "eslint:recommended", "rules": { "indent": [ "error", 2 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "double" ], "semi": [ "error", "always" ], "no-console": 0 }, "globals": { "_": true, "_urlPrefixes": true, "angular": true, "inject": true, "window": true }, "colors": true } Ниже несколько переменных, о которых мы предупредили ESLint: _ представить lodash. _urlPrefixes – объект, который мы будем использовать в приложении для гиперссылок. Я расскажу об этом позже. angular, чтобы представить AngularJS object driving our entire application. inject, который будет использоваться для ввода зависимостей Angular. window, которая просто представляет объекты окон в JavaScript, является представителем  DOM. 9. Настройка Webpack. Теперь, когда мы выложили большинство наших зависимостей приложения, мы можем построить config file для Webpack. Webpack будет консолидировать все зависимости, а также модули для приложений, которые мы создаем в один файл. В bundle. В frontend/webpack.config.js добавляем следующее. module.exports = { entry: "./app/app.js", output: { path: "./dist/js/", filename: "bundle.js", sourceMapFilename: "bundle.js.map", }, watch: true, // eslint config eslint: { configFile: './config/eslint.json' }, module: { preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader" }], loaders: [ { test: /\.css$/, loader: "style!css" }, { test: /\.html$/, loader: "mustache-loader" }, { test: /\.json$/, loader: "json-loader" }] }, resolve: { extensions: ['', '.js'] } }; Для того, чтобы Webpack бандлил все наши статические зависимости, нам нужно указать ему, где их брать, какие зависимости обрабатывать и как управлять ими до банлинга. Давайте посмотрим на то, что указывает Webpack с помощью webpack.config.js: Entry - это путь к тому, что Webpack'у нужно для старта бандлинга. Это можеть быть полный путь или путь, относительный тому, где webpack.config.js располагается. В данном случае мы говорим о последнем варианте. output -  это объект, содержащий в себе path, который является директорией, в которую связанные зависимости будут помещаться; filename - это название бандла; и, в данном случае, мы решили использовать sourceMapFilename, чтобы обозначить, что наша() source map будет вызван(а). watch указывает Webpack следить за изменениями в файле, пока он выполняется. Если это не настроено как true, Webpack прогонит процесс бандлинга единожды и остановится. eslint содержит в себе специфические ESLint настройки, используемые eslint-loader. module указывает Webpack'у, что делать с модулями, с которыми он работает. module.preLoaders «говорит», что делать перед бандлингом. В данном случае мы хотим запустить модули (исключив модули установленные npm) через eslint. module.loaders - это то, где указана последовательность загрузчика. В нашем случае мы просто настраиваем test и loader,  где test указывает Webpack’у, какие модули запускать в загрузчике (по соответствию с паттерном regex), и loader говорит Webpack’y, какой загрузчик использовать в модулях, которые соответствуют regex паттерну в test. Каждый загрузчик указан в строке и разделен восклицательным знаком. Ex:  loader!another_loader!yet_another_loader module.preLoaders указывает, какие preLoaders'у запускать модули. Используемые настройки такие же точно, какие мы использовали в module.loaders. Но, Грег, какая  разница между preLoaders и loaders? Я рад, что ты спросил, мой дорогой друг!! A loader указывает Webpack'у, как бандлить требуемые файлы. Loader смотрит на модуль и говорт: «Эй, так как вы упаковываете это в один файл как строку – это то, как оно должно быть преобразованно для bundle'а». A preLoader обрабатывает код перед loaders, например, чтобы слинтить JavaScript модули. A postLoader является плагином Webpack'а, который обрабатывает код после бандинга. Мы не специфицировали ни один  postLoader ради простоты. 10. Укажите Django загрузить приложение. Прямо сейчас все, что нужно сделать – указать Webpack’у что создавать, как создавать и что должно быть создано. (На данном этапе я бы очень удивился, если вы попробуете запустить его и он заработает без ошибок. Если так и есть, я чертов мужик.) Так как Django использует свой собственный URL процессор в нашем приложении, мы можем быть рады тому, как любезно Django управляет всем тем, что введено в строку браузера пользователя. Как бы то ни было, мы бандлим одностраничное приложение, используя абсолютно другой фреймворк, и хотим, чтобы у приложения был полный контроль над тем, что пользователь вводит. Все, что нам нужно  – обслуживать одну страничку, в которой работает SPA. Следовательно... В backend/mysite/mysite/urls.py добавляем в список urlpatterns следующее: # Web App Entry url(r'^$', TemplateView.as_view(template_name="app/index.html"), name='index'), Это значит, что когда пользователь открывает mysite.com/, env('FRONTEND_ROOT') + app/index.html будет находить STATICFILES_FINDERS  в порядке рендера HTML шаблона. 11. Создайте шаблон базы приложения Angular. frontend/app/components/app/index.html шаблон должен выглядеть как обычный шаблон Django. В frontend/app/index.html добавляем следующее: {% load staticfiles %} <html ng-app="myApp"> <head> <title>My Sitetitle> <script src="{% static 'dist/js/bundle.js' %}">script> head> <body> body> html> В таком случае вам удастся запустить Webpack. Если вы запустите Django сервер и откроете localhost:8000,вы увидите пустую страничку. Если нет – дайте знать автору. 12. Напишите home component. Давайте напишем наш первый компонент. Он отобразит текст на страничке, пока пользователь открывает localhost:8000. Создайте директорию для компонента и базовые файлы. В frontend/app/components/: mkdir home && touch home/home-controller.js home/home.js home/home.html В frontend/app/components/home/home.html добавляем следующее: <div ng-controller="HomeController as ctrl"> <div> <h1>Home!h1> div> div> Теперь добавим следующее в  frontend/app/components/home/home-controller.js: function HomeController() { var that = this; that.foo = "Foo!"; console.log(that); // should print out the controller object } angular.module("Home") .controller("HomeController", [ HomeController ]) Определение модуля Angular должно быть объявлено в home.js: angular.module("Home", []); require("./home-controller"); Теперь мы можем сослаться на "Home" в области зависимости определения модуля. Давайте сделаем это! В app/app.js добавьте следующее: /* Components */ require("./components/home/home"); /* App Dependencies */ angular.module("myApp", [ "Home", // this is our component "ngResource", "ngRoute" ]); 13. Пропишите пути Angular'а, ведущие к home component и страничке 404. Нам нужно настроить первый путь. Когда пользователь попадает на localhost:8000, Angular должен взять контроль над загрузкой отрендеренного шаблона. Чтобы сделать это, нам потребуется использовать angular-router. В frontend/app/routes.js пишем следующее: function routesConfig($routeProvider) { $routeProvider .when("/", { templateUrl: _urlPrefixes.TEMPLATES + "components/home/home.html", label: "Home" }) .otherwise({ templateUrl: _urlPrefixes.TEMPLATES + "404.html" }); } routesConfig.$inject = ["$routeProvider"]; module.exports = routesConfig; Если мы не добавим _urlPrefixes.TEMPLATES, angular-router предположит, что components/home/home.html является действительной ссылкой, которую узнает сервер. Так как STATIC_URL в настройках предполагает неправильную работу localhost:8000/components/home/home.html. Также, если вы еще не заметили, вы увидите otherwise({...})  в коде роутов. Это то, как будут реализованы страницы 404. В frontend/app/404.html добавляем следующее: <h1>NOT FOUNDh1> И в завершении  добавляем frontend/app/app.js: /* Config Vars */ var routesConfig = require("./routes"); 14. Добавьте директивы angular-router к шаблону точки входа приложения. А теперь нам нужно указать Angular, где будет происходить переключение отображаемого, когда пользователь пользуется навигацией. Чтобы сделать это, мы используем всю силу angular-router. В тэг    в frontend/app/index.html добавляем: <base href="/"> Теперь в тэг  добавляем: <div ng-view>div> Ваш index.html теперь должен выглядеть так: {% load staticfiles %} <html ng-app="myApp"> <head> <title>My Sitetitle> <script src="{% static 'dist/js/bundle.js' %}" >script> <base href="/"> head> <body> <div> <div ng-view>div> div> body> html> Запустите Webpack. Откройте localhost:8000. Вы должны увидеть, что произошло в home/home.html. (Если ничего, отправьте эти данные автору J ). 15. Проверьте REST API в приложении Angular. Если все сделано, у вас появится возможность написать angular службы для Django API. Давайте создадим небольшой компонент, чтобы увидеть, можем ли мы это сделать. Этот компонент должен перечислять игры. Я предполагаю, что вы уже заполнили базы данных, следовательно запрос HTTP к localhost:8000/api/v1/games вернет список игр. Создайте скаффолд компонент в frontend/app/components/: mkdir -p game/list/ && touch game/list/game-list-controller.js game/list/game-list-controller_test.js game/game-service.js game/game.js game/game.html Этот компонент будет перечислять игры. Этот компонент должен перечислять игры. Я предполагаю, что вы уже заполнили базы данных, следовательно запрос HTTP к localhost:8000/api/v1/games вернет список игр. В game/game-service.js: function GameService($resource) { /** * @name GameService * * @description * A service providing game data. */ var that = this; /** * A resource for retrieving game data. */ that.GameResource = $resource(_urlPrefixes.API + "games/:game_id/"); /** * A convenience method for retrieving Game objects. * Retrieval is done via a GET request to the ../games/ endpoint. * @param {object} params - the query string object used for a GET request to ../games/ endpoint * @returns {object} $promise - a promise containing game-related data */ that.getGames = function(params) { return that.GameResource.query(params).$promise; }; } angular.module("Game") .service("GameService", ["$resource", GameService]); Обратите внимание на ссылку $resource, которую мы используем для того, чтобы настроить механизмы HTTP в нашей службе. В game/list/game-list-controller.js: function GameListController(GameService) { var that = this; /* Stored game objects. */ that.games = []; /** * Initialize the game list controller. */ that.init = function() { return GameService.getGames().then(function(games) { that.games = games; }); }; } angular.module("Game") .controller("GameListController", [ "GameService", GameListController ]); В game/game.html: <div ng-controller="GameListController as ctrl" ng-init="ctrl.init()"> <div> <h1>Gamesh1> <ul> <li ng-repeat="game in ctrl.games">{{ game.title }}li> ul> div> div> В game/game.js: angular.module("Game", []); require("./list/game-list-controller"); require("./game-service"); Затем обратимся к компоненту в app.js: /* Components */ require("./components/game/game"); /* App Dependencies */ angular.module("myApp", [ "Home", "Game", "ngResource", "ngRoute" ]); В конце концов, мы собираемся настроить роуты для списка игр, поэтому в frontend/app/routes.js добавьте следующее в объект $routeProvider: .when("/game", { templateUrl: _urlPrefixes.TEMPLATES + "components/game/list/game-list.html", label: "Games" }) Запустите Webpack снова. Все должно верно скомпилироваться. Если нет – дайте знать автору. Откройте localhost:8000/#/games. Вы увидите список игр. Сделано! Это все. Сомнения/Мысли Но есть некоторые сомнения: Глобальные переменные могут конкретно подставить вас, если вы не знаете, как с ними работать. Их локальное поведение не гарантирует того же на продакшене. Насколько я помню, их можно заставить работать, если правильно описан метод. Ваше приложение на Angular тесно связанно с Django. Поэтому ваше приложение не будет просто слиянием back- и фронтенда. Если ваш Django-RIP давно устарел, значит поменялись и маршруты, следовательно сконфигурируете ваш бэкенд согласно тому, как должны вести себя статические файлы. Так же вам будет необходимо заменить index.html с точкой входа Angular. Маленькие проекты не дадут вам особо попотеть, а вот большие явно заставят понервничать. Совет: единственное место, где должны сопрягаться приложение на Angular и Django сервер - это одна точка входа. Деплоймент должен быть выполнен так же, как любой обычный деплоймент приложения. Это все. Если у вас есть какие-либо вопросы и вы испытываете трудности, пожалуйста, оставьте их в комментариях в исходной статье! Чит! Автор пообещал выложить на гитхабе репозиторий со всем кодом. Оригинальная статья на английском языке. 

Світ ІТ приваблює багатьох: висока зарплата, віддалена робота, цікаві завдання. Але перед тим як почати навчання, чимало людей зупиняються… через страх. І часто причина — у міфах, які давно не мають нічого спільного з реальністю. У цій статті ми розвінчуємо п’ять найпоширеніших міфів, що заважають новачкам почати шлях у програмуванні. Міф 1  «Щоб стати програмістом, треба бути математичним генієм» Цей стереотип і досі лякає багатьох. Насправді ж для старту в ІТ потрібне логічне мислення, а не знання вищої математики. Так, у деяких напрямках (наприклад, Data Science або GameDev) математика важлива. Але у Web-розробці, QA, DevOps, Backend-проєктах ти можеш працювати, навіть якщо в школі не любив алгебру. Факт: згідно з дослідженням IBM, 72% ІТ-фахівців мають гуманітарну освіту, а не технічну. Міф 2 «Навчання триває роками» Традиційна вища освіта — це 4-5 років, але в ІТ усе інакше. Онлайн-курси, буткемпи, інтенсиви — дозволяють отримати базу за 6–12 місяців. На платформі ITVDN студенти вивчають HTML, CSS, JavaScript, Python або C# у своєму темпі та отримують практичні навички, які потрібні роботодавцям.Навіть після кількох місяців навчання можна знайти стажування або пройти тестове завдання. Міф 3  «Програмування — це тільки для “ботаніків”» Є уявлення, що програміст — це замкнена людина, яка говорить лише з комп’ютером. Насправді це творча і командна професія. В ІТ цінують комунікацію, ініціативу, вміння шукати рішення. Багато розробників починали як фітнес-тренери, вчителі, маркетологи або менеджери. Програмування — це навичка, яку може опанувати кожен. Міф 4 «Без університету тебе ніхто не візьме» Сучасні компанії цінують скили, а не дипломи. Якщо у тебе є GitHub, виконані проєкти, сертифікати, знання англійської — це вже дає перевагу на старті. Більшість студентів ITVDN не мають ІТ-диплому, але після навчання успішно проходять співбесіди та отримують першу роботу. Під час рекрутингу найважливіше — практика, мислення і портфоліо, а не формальна освіта. Міф 5 «Щоб стати програмістом, треба одразу знати всі мови» Це один із найбільш шкідливих міфів. Насправді достатньо обрати одну мову для старту — і з неї побудувати фундамент. Наприклад: Python — чудовий для аналітики, автоматизації, бекенду JavaScript — ідеальний для веб-розробки C# / .NET — популярний для корпоративних застосунків Потім ти зможеш додати інші мови, але спочатку важливо навчитися думати, як програміст. Міфи — це психологічні бар’єри. Вони народжуються з незнання, чужого досвіду або застарілих уявлень. А правда така:  ✅ У програмування можна прийти з нуля  ✅ Навіть якщо тобі далеко не 20  ✅ Без технічної освіти  ✅ І без “геніального” рівня IQ Головне — мотивація, правильна програма та підтримка, які допоможуть пройти шлях від першого коду до першого оферу.

Вітаємо! Друзі, сьогодні ми підготували для вас вибірку найкращих вебінарів від ITVDN за напрямком FrontEnd. До рейтингу були включені як пізнавальні вебінари з актуальною інформацією, так і вебінари прикладного характеру, які мають на меті вдосконалення ваших навичок написання коду. Давайте приступимо до їх розгляду. Як стати FrontEnd розробником? Покрокова інструкція для початківців Автор – Тисячний Влад, Middle React.js / React Native Developer. FrontEnd Developer – це розробник, який створює клієнтську сторону веб-сайтів. Ваші улюблені сервіси – соціальні мережі, відеохостинги, інтернет-магазини, – будь-який інтернет-продукт необхідно піднести користувачеві в привабливому та зручному для нього вигляді. В такій задачі не обійтися без фронтенд спеціаліста. Які вимоги висувають роботодавці до FrontEnd-розробника? Що потрібно знати та вміти, з чого почати та як краще спланувати навчання? На вебінарі ви отримаєте відповіді на всі питання, що вас цікавлять, і складете цілісне уявлення щодо професії FrontEnd розробника. Адаптивне верстання на FlexBox та Grid Авторка – Ткаченко Анастасія, FrontEnd Developer. Flexbox та Grid – технології, які широко використовуються у верстанні сайтів та суттєво спрощують реалізацію їх адаптивності. Що вони являють собою? CSS Flexbox (Flexible Box Layout Module) – модель макету гнучкого контейнера – є способом компонування елементів, в основі лежить ідея осі. Flexbox складається з гнучкого контейнера (flex container) та гнучких елементів (flex items). Гнучкі елементи можуть вишиковуватися в рядок або стовпчик, а вільний простір, що залишився, розподіляється між ними різними способами. CSS Grid Layout – система двомірного макету, оптимізованого для дизайну користувацького інтерфейсу. Головна ідея, що лежить в основі макету сітки, полягає у розподілі веб-сторінки на стовпці та рядки. У області сітки, що утворилася, можна поміщати елементи сітки, а керувати їх розмірами і розташуванням можна за допомогою спеціальних властивостей модуля. У ході вебінару були продемонстровані можливості цих технологій та переваги їхньої комбінації на практиці (у якому разі яку технологію варто використовувати) для створення адаптивних сторінок. Створення гри Тетріс на JavaScript | Частина 1, 2, 3 Автор – Ростислав Силівейстр, FrontEnd Developer. Чудовий вебінар, який підійде навіть тим, хто має нульовий рівень знання JavaScript. Навчання програмуванню шляхом реалізації культової гри Тетріс – це той самий випадок, коли ви поєднуєте приємне з корисним, а результати можуть бути гордо представлені своїм знайомим, друзям і родичам. Кожна частина вебінару зачіпає визначені автором теми: Перша частина включає постановку завдання, ознайомлення з правилами гри, реалізацію поля, падіння і переміщення фігур в сторони. Друга частина спрямована на реалізацію обертання фігур, прискорення їх падіння, зникнення заповнених рядів, нарахування очок, переходу до наступного рівня, і навіть базові ігрові опції (старт, пауза, почати заново, game over). Третя частина є останньою — відбувається тестування та виправлення недоліків, оптимізація коду та підбиття підсумків. Після старанного вивчення всіх трьох частин вебінару та завзятої практики ви навчитеся: розбиратися у структурах, типах даних, функціях JavaScript; роботі з DOM у JavaScript; роботі із засобами HTML/CSS для розміщення елементів на сторінці; систематичному підходу до вирішення завдань, тримаючи в увазі всі деталі; розумінню логіки створення ігор; розумінню основ алгоритмів. Memory Game на JavaScript за 2 години Автор – Ярослав Вовченко, FrontEnd Developer. Щоб почати писати мовою JavaScript, не обов'язково одразу заглиблюватися у вивчення документації. На прикладі написання простої Memory Game ви дізнаєтеся, як обирати елементи в DOM, проходити по спискам та масивам, додавати, прибирати елементи та “слухачі дій”. На вебінарі ви разом з автором поринете у практичне розроблення на JavaScript. Для цього необхідно мати базові знання HTML, CSS та JavaScript. Вебінар організований наступним чином: Створення структури проєкту, написання перших файлів. Розмітка та стилізація ігрового поля за допомогою HTML та CSS. Основи роботи з перспективою у CSS. Збереження та порівняння обраних карток. Написання додаткового функціоналу. Підсумки, запитання та відповіді. Цей вебінар буде цікавий тим, хто хоче вивчити основи JavaScript у легкій та доступній формі без багатогодинного читання документації. Об'єктно-орієнтоване програмування JavaScript | ООП у JavaScript Автор – Георгій Клюковкін, Lead Software Engineer. Це відео допоможе вам зрозуміти, у чому відмінність ООП підходу до розробки в мультипарадигменній мові JavaScript від ООП підходу в класичних об'єктно-орієнтованих мовах, як, наприклад, Java. Ви дізнаєтеся, які плюси та мінуси має ООП в JavaScript, а також, які правила ООП ми можемо в ньому застосовувати. Автор торкається наступних тем: Основні принципи ООП. Наслідування vs Композиція. Об'єктно-прототипне наслідування у JS. Функції-конструктори та класи. Single responsibility principle. Вебінар буде корисний розробникам-початківцям JavaScript, або тим, хто працює в іншому напрямку і при цьому бажає розібратися в особливостях ООП на JavaScript. П'ять обов'язкових алгоритмів JavaScript розробника. Автор – Тисячний Влад, Middle React.js / React Native Developer. Якщо Ви розробник-початківець і хочете розібратися в тому, наскільки глибоко потрібно вникати у вивчення алгоритмів і структур даних, як часто і які алгоритми потрібно буде використовувати в роботі, хочете зрозуміти, як від правильного вибору алгоритму залежить швидкість роботи сайту, а також дізнатися, як оптимальність алгоритму впливає на швидкість завантаження інформації на сайті — тоді цей вебінар для Вас. У ньому розглядаються такі теми: Що таке алгоритми та структури даних. Як правильно рахувати складність алгоритму. Чи потрібно знати всі алгоритми і як це впливає на ваш гаманець (приклади реального життя). 5 найважливіших алгоритмів. Практика написання алгоритмів сортування. Відповіді на питання.   Підготовка до співбесіди з JavaScript у 2021 році. Автор – Дмитро Мойсеєв, Software Engineer at EPAM Systems. У вебінарі порушуються основні питання на співбесіді з JavaScript, які викликають найбільше нерозуміння, особливо у тих, хто перейшов з іншої мови програмування, а також у тих, хто не знайомий з його складними частинами, такими як замикання, прототипне наслідування та особливості асинхронного виконання коду. Автор торкається наступних тем: Типи даних та їх перетворення. Області видимості та замикання. Прототипне наслідування. Асинхронне виконання коду. Відповіді на запитання учасників вебінару. Даний вебінар буде цікавий тим, хто планує проходити співбесіду на позицію FrontEnd розробника на рівень Junior або Middle Developer. Початківцям він не підійде, тому що в вебінарі не розглядатимуться основи мови, а лише її “гострі кути”. 8. React та Redux на прикладі реального додатку. Автор – Олександр Краковський, Software Engineer at EPAM. Даний вебінар допоможе вам на реальному прикладі розібрати, як взаємодіють та працюють сучасні інструменти розробки – React та Redux. Ви зможете написати свій додаток, який буде працювати з реальним API. У ході реалізації програми будуть виконані наступні пункти: Встановлення залежностей, налаштування проєкту. Створення базових компонентів та підключення Redux. Налаштування залежностей для роботи із запитами до сервера. Створення запитів та оброблення даних через Redux. Запуск програми, виправлення помилок. Аналіз виконаної роботи. 9. Створення першого проєкту на Angular Автор – Генріх Коваленко, FrontEnd Developer. У цьому вебінарі ви познайомитеся зі структурою та компонентами фреймворку Angular, а також створите перший проєкт із використанням Angular CLI. На вебінарі розглядаються наступні теми: Що таке Angular і в чому його відмінність від інших популярних фреймворків та бібліотек. Angular CLI, його встановлення та використання у створенні першого проєкту. У чому призначення компонентів та як їх застосувати для зручності підтримки коду надалі. Обслуговування Angular. Модулі. Пайпи та їх застосування, створення своїх пайпів. Директиви *ngFor та *ngIf. Підсумки. Запитання, відповіді. Даний вебінар буде цікавий тим, хто володіє мовою JavaScript на базовому рівні і хоче познайомитися з Angular для подальшої роботи з даним фреймворком. 10. Як стати React розробником Автор – Олег Мельничук, Full Stack JS Developer. React — бібліотека JavaScript, яка впевнено тримає позиції у світі веб-розроблення поруч із найпопулярнішими фреймворками. На вебінарі піднімається історія виникнення React.js, після чого йде порівняння з іншими популярними веб-технологіями. Автор розповідає, чому React – це гарний вибір для входу до FrontEnd. Ви дізнаєтесь, наскільки потрібний чистий JS і чи можна відразу вивчати React. Буде детально розібраний Roadmap React розробника: що можна пропустити на перших етапах, що краще вивчити детально, а на що не варто витрачати сили. Також, автор надає перелік знань та навичок, з якими можна знайти першу роботу у якості React Developer`a. Буде порушено питання подальшого розвитку – як із Frontend розробника на React можна стати Full Stack або Mobile розробником. Цей вебінар буде цікавий Frontend розробникам-початківцям, а також веб-розробникам, які планують перейти на React або вивчити його як додаткову технологію. Вивчайте FrontEnd розробку на ITVDN!

Що таке React Хто такий React розробник Що має знати React розробник Основні технології Технології з екосистеми реакту Додаткові технології Як вивчити Реакт з нуля Загальний Roadmap Три способи вивчення реакту Поради Висновки   Вітаємо! В даній статті ми поговоримо про одну з найпопулярніших спеціальностей на світовому ринку ІТ-розроблення – React Developer. Ви дізнаєтеся, в чому заключається робота даного спеціаліста, переваги його основного інструменту створення ПЗ, який ще арсенал він тримає при собі, а також як стати реакт розробником і максимізувати шанси на успішне працевлаштування. Що таке React React (інколи React.js, ReactJS) – це JavaScript-бібліотека для створення гнучких та сучасних користувацьких інтерфейсів (UI) для вебзастосунків. Вона дозволяє розробити все те, з чим користувач вебресурсу може взаємодіяти напряму: привабливе оформлення сайту, ефектні анімації, адаптивний дизайн, який підлаштовується під різні девайси тощо. Додатково реакт дозволяє створювати не тільки UI, а й клієнтську логіку: авторизація на сайті, чати для спілкування з менеджерами та інша взаємодія. Зазвичай вона виноситься в окремі модулі, а також застосовуються так звані хуки (hooks). Відповідно до опитування Stack Overflow Developer Survey 2023 (90+ тисяч респондентів з усього світу), бібліотека React є найпопулярнішим інструментом для веброзробки на FrontEnd стороні. Це ж підтверджують дані від Statista – глобальної платформи даних та бізнес-аналітики. Підтримують та розвивають бібліотеку реакт девелопери з Meta (Facebook). Вона має відкритий вихідний код, а її рішеннями послуговуються такі відомі компанії, як Airbnb, Netflix, Yahoo, Atlassian, Sony, Instagram, Reddit та багато інших. Сильні сторони реакту ми висвітили в наступній таблиці: Переваги React Короткий опис Легкість Реакт проста, швидка та зручна як у вивченні, так і в роботі (легша, ніж Angular, але дещо складніша за Vue.js) Компонентна архітектура Сприяє зручному перевикористанню компонентів у різних ділянках проєкту Віртуальна DOM (Document Object Model) Дозволяє оновлювати та рендерити лише ті компоненти, які зазнали змін – це підвищує швидкодію застосунків Проста інтеграція з BackEnd Бібліотека легко інтегрується з BackEnd-інструментами на базі мови JavaScript, яку також використовує React Об’ємна екосистема Існує велика кількість додаткових інструментів та бібліотек, які спрощують і пришвидшують розроблення Дружність по відношенню до SEO Легкість оптимізації вебінтерфейсів під SEO-вимоги для кращої індексації в пошукових системах Потужна спільнота Ком’юніті реакт розробників багаточисельне та є рушієм постійного вдосконалення, а також швидкого вирішення проблем під час розроблення Для чого використовують React? Дана бібліотека гарно підходить для побудови користувацьких вебінтерфейсів, які відзначаються високими показниками динамічності та продуктивності. Компонентна архітектура дозволяє створювати такі компоненти інтерфейсу, котрі можна з легкістю використовувати повторно. Віртуальна DOM підвищує продуктивність, мінімізуючи ресурсозатратні прямі маніпуляції з реальною DOM, що робить реакт ідеальною для застосунків з високою частотою оновлень та високим ступенем інтерактивності. Хто такий React розробник React розробник – це ІТ-спеціаліст, який створює клієнтську сторону вебзастосунків за допомогою бібліотеки React. Він є фахівцем напрямку FrontEnd, і серед його основних задач – реалізація зовнішнього вигляду вебсервісів, а також створення відповідної користувацької логіки. Що робить реакт розробник? Його типові задачі: верстання клієнтської сторони вебсервісу згідно з дизайнерськими макетами; створення ефективних компонентів застосунку, які є головними будівельними блоками в реакті; написання FrontEnd-логіки; реалізація прийому-передачі даних з BackEnd-стороною та сторонніми API; створення unit-тестів для забезпечення коректної роботи кожної ділянки коду; підтримка та оновлення існуючого коду для забезпечення сумісності з новими версіями ReactJS та інших технологій; створення та підтримка проєктної документації; участь у код-рев’ю; рефакторинг написаного коду; взаємодія з іншими членами команди: FrontEnd та BackEnd розробники, Project Manager (або замовник), UX/UI дизайнери тощо. Що має знати React розробник З кожним роком очікування працедавця від Junior React Developer зростають. Це природний процес, на який впливає збільшення кількості розробницьких інструментів. Також прохідну планку підвищують нещодавня пандемія коронавірусу й повномасштабне вторгнення. Основні технології Якими технологіями необхідно володіти сьогодні, аби отримати першу роботу як реакт розробник? Головні інструменти: HTML & CSS – це основні структурні блоки вебресурсу, які відображають інформацію користувачеві. HTML як мова розмітки формує каркас і дає текст, а CSS – оформлення, стилізацію, прості анімації. Також буде важливим опанувати семантичне верстання та верстання під мобільні пристрої.   Flexbox, Grid – технології гнучкого верстання, що дозволяють створювати адаптивні вебінтерфейси, пристосовані до різних екранів: варіації моніторів, смартфони, планшети тощо.   JavaScript – ключова мова програмування, яка тримає фронтенд. Важливо володіти нею на високому рівні, адже реакт за замовчуванням використовує саме джаваскрипт. Все більшої популярності набирає TypeScript в комбінації з React JS, але про нього поговоримо згодом.   Git – інструмент керування версіями, обов’язковий для вивчення багатьом розробникам різних напрямків. Переходьте до нього якомога раніше, в ідеалі – одразу після опанування основ HTML & CSS.   GitHub / GitLab – вебсервіси для розміщення ваших проєктів з метою ведення командного розроблення та формування вашого портфоліо. Можете обирати той, який вам до вподоби: GitHub найпопулярніший у світі, а GitLab створений українцями)   REST API – архітектурний стиль для реалізації взаємодії між вебзастосунками. Маст-хев для всіх розробників, дотичних до вебу.   React – головна бібліотека героя цієї статті. Часто використовується для створення складних, інтерактивних вебзастосунків, й особливо добре підходить для односторінкових вебдодатків (SPA). Також додамо до списку володіння принципами написання чистого коду (SOLID, KISS, DRY), вміння проводити рефакторинг свого коду, а також англійську мову на рівні мінімум B1 (для зручного читання технічної документації). Але чим краще ви знаєте інгліш, тим більше шансів ви матимете на працевлаштування та більш високу ЗП. Технології з екосистеми React Окрім класичних реактівських тем, як-от віртуальний DOM, стани, хуки, запити до сервера, оптимізація пам’яті тощо, треба опанувати низку додаткових інструментів з її екосистеми, а саме: Redux / Redux Toolkit – бібліотека для управління станами на клієнті.   React Router – допомагає в реалізації клієнтської маршрутизації, що дозволяє легко керувати навігацією на стороні FrontEnd.   React Hook Form – бібліотека для ефективної та простої роботи з користувацькими даними у формах.   React Testing Library або Jest – інструменти для unit-тестування коду. Додаткові технології Інструменти вище являють мінімум, необхідний для успішного працевлаштування. Однак реалії поточного ринку ІТ такі, що аби зафіксувати увагу працедавця на собі, треба знати й уміти більше. Розглянемо найпоширеніші додаткові технології, які часто зустрічаються у вакансіях на Djinni, DOU.ua, у телеграм-пабліках, LinkedIn тощо. Інструменти стилізації. Сюди відносяться бібліотеки та фреймворки, які впливають на продуктивність верстання, наприклад Tailwind CSS, Material UI, Chakra UI, Bootstrap тощо. Також популярні CSS-препроцесори, як-от SASS, SCSS, Stylus, LESS. Все вчити необов’язково, просто оберіть із першого та другого переліку найбільш популярні інструменти й зверстайте ними декілька проєктів.   Алгоритми та структури даних (ADS) – тема, через яку має пройти кожен програміст. Як початківцю React JS, немає потреби глибоко закопуватися в ADS, але треба обов’язково знати теорію, мати розуміння щодо застосування тієї чи іншої структури даних, здатність оцінити складність алгоритму та вміти реалізовувати популярні алгоритми сортування та пошуку.   Патерни проєктування – загальноприйняті принципи вирішення популярних задач у програмуванні. Допомагають підтримувати зрозумілість, чистоту, масштабованість і читабельність коду.   Webpack – збирач модулів, котрий дозволяє скомпілювати в один файл різні складові проєкту і таким чином полегшити розроблення.   TypeScript – мова програмування, котра являє собою синтаксичний цукор для JavaScript. Все частіше у вакансіях з’являються вимоги до знання TS, особливо цю тенденцію підкреслює лютневий рейтинг мов програмування від DOU.   Figma – дизайнерський інструмент для створення UI вебсервісів. Володіння основами фігми є важливим для React FrontEnd розробників – дозволяє оперативно верстати вебсторінки з дизайнерського Figma-макету.   Next.js є фреймворком, що дозволяє вебзастосункам на базі реакт використовувати технології рендерингу на серверній стороні (SSR) та статичного генерування сайту (SSG), що позитивно впливає на продуктивність і SEO-параметри. Гарний вибір для розробників, які створюють FrontEnd, але прагнуть мати доступ до певних BackEnd-можливостей.   React Native – фреймворк з екосистеми реакту, який дозволяє створювати мобільні застосунки під iOS та Android, а також десктопні рішення. Досить часто з’являється у вакансіях, тому знання React Native може стати вашою ключовою перевагою.   Node.js – платформа для серверного розроблення, яка дозволяє створювати BackEnd-частину вебзастосунку тією ж JavaScript і таким чином перейти у FullStack. Все частіше розробники додатково вчать ноду, аби збільшити свою привабливість для роботодавця. Як вивчити React з нуля Процес вивчення Реакт технологій може бути досить заплутаним для новачків. Нижче ми розрубуємо цей гордіїв вузол. Загальний Roadmap Отже, з чого почати опанування професії Trainee / Junior React Developer та як рухатися: Знайомство з вебом. Як майбутній розробник, який створює FrontEnd-сторону для вебзастосунків, ви маєте розуміти дану предметну область: що таке інтернет і як він функціонує, як працює браузер, що таке протоколи HTTP/HTTPS, DNS, доменне ім’я, хостинг тощо.   Вивчення верстання – HTML & CSS. База, фундамент, ґрунт фронтенду. Обов’язково підкріплюйте знання верстанням вебсторінок – в інтернеті багато сервісів із безкоштовними макетами.   Поглиблені техніки: адаптивне, семантичне верстання. Реакт розробник повинен підлаштовувати свої вебрішення під екрани різних розмірів, а також враховувати вимоги сучасних пошуковиків до HTML-семантики. Курси “CSS Flexbox” та “Верстка на Grid” швидко і легко навчать вас створювати адаптивні рішення.   Вивчення Git & GitHub. Після опанування основ верстання можете переходити до Git і GitHub / GitLab. Зверстайте декілька вебсайтів і опублікуйте на віддаленому репозиторії для практики.   JavaScript. Головна мова програмування для реакт розробника. Паралельно з її вивченням регулярно практикуйтеся на Codewars та LeetCode, в ідеалі – щодня.   React. Гарний фундамент у JS відкриває двері до вирішення питання як вивчити реакт з нуля. А найкраще це робити за допомогою курсів “React Базовий” та “React Поглиблений”, котрі розкривають усі необхідні теми. Вивчайте екосистему реакту, створюйте реакт-проєкти і публікуйте їх на GitHub / GitLab. З одного боку, ви відточуватимете свої навички, а з іншого – будете формувати своє портфоліо. З огляду на стрімкий ріст популярності TypeScript, радимо вивчити й цю мову. Якщо ви знаєте JS, багато часу тайпскрипт у вас не забере. Найголовнішу, чітку та структуровану інформацію ви знайдете у нашому однойменному курсі. Три способи вивчення React Існує три головні підходи до вивчення ІТ-спеціальностей – реакту в тому числі: самостійне вивчення за безкоштовними ресурсами; навчання за платними відео курсами; навчання у форматі живих уроків онлайн або офлайн. Самостійне навчання дозволяє зекономити кошти, натомість ви самостійно шукатимете всю інформацію: навчальні ресурси, матеріали, приклади коду, поради тощо. Цей варіант підходить невеликому відсотку людей, які мають гарну самодисципліну, незмінно високу мотивацію та справжній вогонь в очах. Це дійсно самурайський шлях React розробника – не кожен зможе витримати даний темп і осилити всю дорогу. Навчання за платними відео курсами – це золота середина між вашим темпом життя та опануванням сучасної ІТ-професії. Ви одразу отримуєте структуровані та актуальні навчальні матеріали, конспекти, приклади коду, можливість консультації і т. д. Вам не потрібно шукати це все в інтернеті. При цьому ви зберігаєте гнучкість у навчанні – займайтеся вивченням спеціальності тоді, коли вам зручно. З мінусів – немає чіткого важіля впливу на вашу мотивацію та дисципліну. Ви можете тиждень позайматися й закинути відео курси на місяць, і всі ваші досягнення будуть марними. Навчання у форматі живих онлайн або офлайн занять – найефективніша форма опанування спеціальності, зокрема напрямку React Developer. Ви займаєтеся в групі (а це підтримує мотивацію та здорову конкуренцію), отримуєте інформацію в режимі реального часу від досвідченого ментора, який дає вам найважливіші знання та відповіді на всі ваші питання. Регулярні д/з з перевірками та фідбеком, курсові роботи і тестування, відповідальність перед ментором та групою – таке середовище максимально сприяє вашій концентрації на навчанні. Це найдорожчий формат навчання, але результати того варті. Поради, які працюють Які поради з вивчення реакту будуть ефективними?   Використовуйте ШІ для навчання. Штучний інтелект не повинен писати за вас код, однак його доцільно використовувати для пояснення теми, частини коду, консультації щодо покращення коду або наштовхування вас на правильне рішення задачі тощо.   Практикуйтеся якомога частіше. Стати гарним програмістом можна виключно шляхом регулярного кодингу, оскільки цей напрям дуже зав’язаний на практиці. В ідеалі писати код щодня по декілька годин (мінімум 2).   Покращуйте володіння англійською мовою. Український ринок ІТ дуже перегрітий новачками, тому вимоги до англійської зростають все більше – компанії прагнуть відібрати найкращих кандидатів. Також гарний English дозволяє претендувати на вищі ЗП, відповідно до зарплатного опитування DOU (січень 2024).   Знайдіть собі ментора. Ідеальний варіант для вивчення React напрямку – наставництво досвідченого спеціаліста. Ментор надасть вам корисні лайфхаки зі спеціальності, прискорить ваш прогрес, підтримуватиме мотивацію, а також – є певна ймовірність – може забрати до себе в компанію (або порекомендує комусь). Найкращі майданчики пошуку менторів – LinkedIn, університетські спільноти технічних ВНЗ тощо.   Долучайтеся до спільнот однодумців. Рухатися у вивченні чогось нового завжди легше, коли робиш це разом із іншими. Вже згаданий LinkedIn та Telegram мають велику кількість спільнот за інтересами. Повноцінну збірку українських ІТ-спільнот ви можете знайти на сайті Ukrainian IT Communities.   Відвідуйте онлайн та офлайн події. Це можливість знайти корисні знайомства, які можуть призвести до менторингу, працевлаштування та іншим вигодам.   Пробне інтерв’ю з розробником. Не запрошують на співбесіди? Не біда! Ви можете пройти пробне інтерв’ю зі справжнім розробником за донат. Таким чином ви отримаєте корисний зворотний зв’язок і зрозумієте свої слабкі сторони, визначите напрямок подальшого розвитку в напрямку Реакт.   Пробне інтерв’ю з рекрутером. Якщо співбесіда з розробником більше сфокусована на перевірці ваших hard навичок, то рекрутер дозволяє проаналізувати soft скіли, ваше резюме та робочі акаунти, вміння правильно підсвітити свої переваги.  Зважаючи на велику конкуренцію на ринку праці, радимо не зупинятися на Реакті. Чим більше знань та навичок у вас є, тим привабливіші ви для працедавця. Як тільки надійно опануєте даний FrontEnd-напрямок, потроху рухайтеся до BackEnd або Mobile розроблення. Для створення серверної частини вивчайте Node.js і відповідну інфраструктуру, а якщо вас більше цікавить ПЗ під гаджети – React Native. Ми якраз маємо новий курс із нейтіву українською. І новий відео курс із Node.js також!   Якщо ви зацікавлені в якомога швидшому працевлаштуванні після вивчення ІТ-спеціальності, зверніть увагу на Live Online навчання в групі з ментором на ITVDN – він має низку вагомих переваг. Кожному, хто навчається в даному форматі, з першого дня і до моменту отримання job-оферу доступна безкоштовна допомога від нашого HR-спеціаліста: визначення ваших цілей на персональній консультації; асистенція під час складання резюме (CV) та супровідного листа (Cover Letter); асистенція з оформлення LinkedIn-акаунту; тестове інтерв’ю з нашим спеціалістом + визначення ваших сильних та слабких сторін; розроблення job-search стратегії; надання додаткових корисних матеріалів. Висновки В поточних реаліях стати реакт розробником складно, але можливо. Ринок ІТ переповнений джунами, які хочуть “увійти в ІТ” швидко й без клопоту. Аби відсіяти таких кандидатів і зібрати найкращих, компанії виставляють все більше вимог. Саме тому до навчання, портфоліо, резюме та інших елементів потрібно ставитися з особливою відповідальністю. Якщо вас цікавить навчання за відео курсами, переходьте за посиланням на сторінку спеціальності React Developer. Там ви знайдете цілу збірку відео курсів, яка допоможе вам опанувати найважливіші аспекти спеціальності. Якщо ж ви надаєте перевагу максимально ефективній формі навчання, пропонуємо розглянути можливість навчання у форматі Live Online з ментором у групі за спеціальністю FrontEnd Developer на ITVDN. Успіхів у вашому вивченні react js! Залишайтеся з ITVDN!

Основні технології. Фреймворки та допоміжні інструменти. Необов’язкові технології. Зарплати FrontEnd розробників. DOU. Djinni. Stack Overflow Developer Survey 2023. Чому так багато технологій? Поради новачкам FrontEnd. Підсумки.   FrontEnd – один із найлегших розробницьких напрямків в ІТ. Він вигідно вирізняється тим, що поєднує в собі програмування та творчість, оскільки девелопер працює над оживленням дизайнерського макету та створенням відповідної користувацької логіки. Також перевагою фронтенду є те, що побачити результат своєї роботи можна майже одразу – в будь-якому браузері. Відносна легкість фронтенду породжує велику популярність серед бажаючих потрапити в ІТ, а враховуючи наслідки відкритої агресії по відношенню до України – особливо велику популярність, адже це можливість працювати віддалено (на ІТ-компанію або на фрилансі) і отримувати гарну зарплату. Відповідно, конкуренція серед Trainee/Junior FrontEnd розробників шалена, а тому роботодавці вимушені закручувати гайки і підвищувати вимоги до кандидатів, аби відібрати найкращих.  Тож як стати фронтенд розробником? Якими технологіями необхідно володіти, аби стати Intern/Junior FrontEnd розробником у 2024 році? Проаналізувавши вакансії на українському ринку IT, ми склали список актуальних інструментів, які зазвичай вимагають роботодавці від кандидатів. Їхній перелік – нижче у статті. Frontend developer roadmap. Основні технології HTML5 & CSS3 HTML5 і CSS3 – це фундаментальні технології, без знання яких не обійтися жодному веброзробнику. За допомогою мови гіпертекстової розмітки HTML створюється розмітка (каркас) кожної вебсторінки. Потім мова стилів CSS збагачує візуальне оформлення сайту і надає йому привабливого та ефектного зовнішнього вигляду. Крім цього, необхідно володіти: кросбраузерним адаптивним верстанням, щоб вміти створювати сайти під мобільні пристрої, планшети і широкоформатні екрани та для різних браузерів; семантичним верстанням для підвищення якості розмітки та покращення пошукової індексації сайту; валідним верстанням, яке передбачає повну відповідність коду розробника всім стандартам W3C – організації, яка створює та впроваджує технологічні стандарти для World Wide Web. Приділіть особливу увагу верстанню під мобільні пристрої, тому що сучасний вебспоживач дуже багато часу проводить у смартфоні. Існує навіть спеціальний підхід, при якому спочатку верстається вебсайт під мобільні пристрої, а потім під десктопи – називається Mobile First. Це загальні вимоги щодо верстання. Тепер розглянемо більш детально вимоги безпосередньо щодо мови стилів – CSS. Тут ви повинні знати основні властивості CSS3: фони, градієнти, тіні, анімації, трансформації, переходи, а також технології Flex та Grid, про які ми ще поговоримо. Гарне володіння HTML та CSS вже дозволяє займатися верстанням сайтів та заробляти гроші. Саме з цих двох базових технологій починається шлях до професії FrontEnd розробника. Якісно вивчити HTML та CSS ви зможете за допомогою наступних наших курсів: HTML5 & CSS3 Стартовий; HTML5 & CSS3 Базовий; HTML5 & CSS3 Поглиблений. Flex та Grid CSS Технології верстання надійних адаптивних вебсторінок, які дозволяють легше створювати динамічні сайти та зручніше структурувати їх вміст. На нашому ресурсі є українськомовні відео курси, які гарно пояснюють теми Flex та Grid верстання: CSS Flexbox та Верстання на Grid. CSS-препроцесори CSS-препроцесор — це програма, яка має власний синтаксис, але може згенерувати з нього CSS-код. Найчастіше у вакансіях зустрічаються SASS, SCSS, Stylus, LESS. Препроцесори призначені для: прискорення процесу написання коду; спрощення читання коду та його подальшої підтримки; мінімізації рутинної роботи під час написання коду. Для підвищення ефективності написання CSS-коду достатнім буде вивчення лише одного препроцесора, але у вакансіях часто зустрічаються одразу декілька. Git & GitHub Git – найбільш популярна система контролю версій, яка дозволяє вести історію розроблення проєкту з можливістю доступу до кожної збереженої версії. Крім того, варто вміти працювати з сервісом онлайн-хостингу проєктів, який використовує систему контролю версій. У даному випадку це GitHub. У тандемі з Git він дозволяє розробникам зберігати свій код онлайн у хмарному сховищі, а потім взаємодіяти з іншими розробниками у різних проєктах. Дані системи дозволяють команді програмістів працювати над одним проєктом одночасно, зберігаючи внесені зміни, і навіть відслідковувати виконання завдань кожним членом групи. Git & GitHub — дуже важливі інструменти для будь-якого IT-розробника, вивченням яких слід зайнятися якомога раніше. Ми рекомендуємо вивчати Git на ITVDN за допомогою курсу «Основи роботи з Git». Знання про вебтехнології та мережу інтернет Щоб якісно виконувати свою роботу, фронтенд розробник повинен розбиратися у вебі і розуміти принципи його функціонування. Таким чином, необхідно знати: як працює інтернет; протоколи HTTP/HTTPS, вебсокети; як працюють браузери; що таке DNS та як він працює; що таке доменне ім'я; що таке хостинг. Також буде непогано, якщо ви спробуєте налаштувати сайт на якомусь безкоштовному хостингу, прив'яжете домен до цього хостингу. JavaScript Мова програмування, яка використовується як при розробленні клієнтської сторони веб-застосунку, так і серверної. За допомогою JavaScript (скорочено JS) можна писати навіть настільні та мобільні додатки, використовуючи певні програмні платформи та бібліотеки. Ця мова дозволяє: динамічно змінювати HTML-розмітку; здійснювати інтерактивну взаємодію з користувачем; анімувати зображення; здійснювати валідацію форм; керувати мультимедіа тощо. Іншими словами, JavaScript "оживлює" сторінку та додає їй функціональності. Гарне володіння цією мовою програмування є обов'язковим пунктом для кожного FrontEnd розробника. JavaScript використовує офіційний стандарт ECMAScript (скорочено - ES), який має на увазі певний формальний опис синтаксису, базових об'єктів та алгоритмів. На даний момент існує багато різних версій ES. Роботодавці найчастіше вимагають знання ES6+. Однак спочатку необхідно вивчити чистий JavaScript (vanilla JavaScript) і лише потім вникати в нові стандарти. Як не крути, а класику треба знати. Завдяки гарному володінню JS можна швидко розібратися в будь-якій версії ES, а потім опанувати будь-який фреймворк або бібліотеку. ITVDN надає можливість вивчити JavaScript з нуля до поглибленого рівня за допомогою курсів: JavaScript Стартовий; JavaScript Базовий. 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. Всі три технології мають особливу цінність для кожного веброзробника та розкривають організацію роботи інтернет-застосунку. REST API API – Application Programming Interface – це набір правил, при дотриманні яких програми можуть між собою взаємодіяти. Розробник створює API на сервері та дозволяє клієнтам звертатися до нього. Красномовним прикладом буде API від Google Maps, котрий дозволяє веброзробнику вказати на гугл мапі розташування певної будівлі (точку видачі інтернет-замовлень, офіс компанії абощо) на своєму сайті. Таким чином програміст позбавляє себе необхідності самому розробляти власну мапу і користується вже готовим рішенням від Google, використовуючи набір правил від API. REST – Representational State Transfer – це архітектурний підхід, котрий регламентує, як саме API мають виглядати. Цьому набору правил має слідувати девелопер під час створення власного застосунку. Простими словами, REST – це звичайний запит виду «клієнт-сервер» з використанням HTTP-протоколу. Фронтенд розробнику необхідно розбиратися у REST API, оскільки ця технологія використовується усюди, де є необхідність працювати з даними від сервера. Алгоритми та структури даних Розуміння алгоритмів та структур даних (ADS, від Algorithms and Data Structures) – обов'язок будь-якого грамотного програміста. До структур даних відносяться: стеки, черги, зв'язані списки, графи тощо. Вивчивши їх, ви зможете керувати складністю своїх програм, роблячи їх більш доступними для розуміння, а також розробляти високопродуктивні програми, які ефективно працюватимуть з пам'яттю. Знання алгоритмів дозволить вам створювати складні конструкції для ефективного розв'язання широкого спектра завдань. Коли говорять про алгоритми, зазвичай мають на увазі алгоритми сортування та пошуку: сортування прямим включенням, прямим вибором, злиттям, пірамідальне, прямий пошук, бінарний, індексно-послідовний та інші. Важливо розумітися і на нотації Big O, яка описує складність кожного алгоритму. Даний механізм допомагає визначити, за яких умов вигідніше використовувати той чи інший алгоритм. Зазначимо, що як новачкові, вам не треба пірнати вглиб цих тем. Буде достатньо: теоретичного володіння ADS; розуміння, де яку структуру даних слід використати; уміння оцінити складність алгоритму (Time Complexity та Space Complexity); уміння написати декілька алгоритмів (найпопулярніші алгоритми сортування та пошуку). Володіння ADS допоможе вам створювати більш якісний та оптимізований код. Крім того, це посилить ваші позиції серед інших кандидатів. Webpack Потужний збирач модулів (bundler), який дозволяє скомпілювати в один файл кілька різних компонентів: від .js та .css файлів до картинок, шрифтів тощо. Використовується для роботи над об'ємними проєктами і досить часто зустрічається у вакансіях. Воно і не дивно – це найпопулярніший збирач, як-не-як. npm Node Package Manager – пакетний менеджер, який є найбільшим у світі реєстром програмного забезпечення (відповідно до витягу з офіційного сайту). Використовує платформу Node.js і дозволяє розробникам з усього світу користуватися вже готовими програмними рішеннями та поширювати власні на основі Node.js. npm використовують для керування залежностями, себто для встановлення, оновлення та видалення тих пакетів (бібліотек та інструментів), які використовуються у вашому проєкті. Незамінна річ для FrontEnd розробників, якою ви обов’язково користуватиметеся. Основи Figma Figma – це популярний дизайнерський інструмент для створення інтерактивних прототипів застосунків або веб-сайтів. З його допомогою дизайнер створює дизайн, який фронтенд-розробник потім верстає за допомогою HTML/CSS і додає інтерактивність при участі JavaScript. Знання основ фігми дозволяє девелоперу зручно взаємодіяти з дизайнерським прототипом: швидко дізнаватися необхідні розміри тих чи інших елементів, робити експорт картинок та іконок тощо. Додатковий плюс – можливість використання браузерної версії Figma. Англійська мова План навчання Front-end повинен обов'язково включати підтягування English. Знання англійської є однією з основних вимог до фронтенд-розробника, оскільки велика кількість корисної інформації знаходиться саме на англомовних сайтах. Рівень читання технічної документації буде достатньо для комфортного користування іноземними ресурсами (Intermediate). Однак чим вищий рівень вашої англійської, тим більші шанси отримати job-офер. Інгліш використовується не тільки при роботі з документацією, а і при комунікації з командою та клієнтами. Серед програмістів побутує вислів: «Яку мову слід вчити першою? Вчи англійську!». Тому не пошкодуйте ваш час і гарненько підтягніть англійську – цілком можливо, що саме гарне володіння нею стане вирішальним при розгляді вашої кандидатури. Підтягнути English ви можете завдяки наступним безкоштовним відео курсам на ютуб-каналі CodeUA: Business English – ви опануєте базову ділову лексику для активної участі у перемовинах англійською, а також ведення ключової документації цією мовою. IT English – акцент на прокачці ділової лексики, граматики, усталених конструкцій та виразів з ІТ-сфери. Фреймворки та допоміжні інструменти Основні фреймворки JavaScript Це інструменти, за допомогою яких створюються динамічні веб/мобільні/десктопні застосунки мовою JavaScript. Вони прискорюють розроблення вебзастосунків та передбачають чітко структуровану організацію коду, підвищуючи його якість та чистоту. Найпопулярнішими high-level інструментами для фронтенд розроблення можна назвати фреймворки Vue.js, Angular та бібліотеку React. Кожен із них призначений для вирішення свого спектру завдань і має різний ступінь складності: Vue.js – найлегший (але й з найменшою спільнотою), React – середньої складності, Angular – високої складності. Варто сконцентруватися на глибокому вивченні одного фреймворку, але в той же час дуже рекомендується знати особливості та сферу застосування всіх перерахованих вище технологій. Який фреймворк все ж обрати? Думки щодо цього розходяться. Інструментарій вибирається індивідуально під проєкт та важко передбачити, які задачі вам потрібно буде вирішувати. На даний момент найбільшою популярністю користується React, оскільки вона збалансована як з точки зору складності, так і з точки зору багатства функціоналу. До того ж найбільша кількість вакансій припадає саме на цю бібліотеку, а значить, що вона цікава не тільки розробникам, а й бізнесу. Кожен із цих трьох інструментів доступний для вивчення на платформі ITVDN. Українськомовні курси за напрямком Angular: Angular Базовий. Тестування Angular-застосунків. За напрямком React: React Базовий. За напрямком Vue.js: Vue.js Стартовий. Допоміжні фреймворки JavaScript Наряду з традиційною трійкою – Vue.js, React та Angular – у вакансіях часто зустрічаються інші фреймворки, створені на їхній базі, наприклад Next.js та Nuxt. Next.js базується на популярному React і дозволяє збільшити ефективність та масштабувати процес створення реакт-застосунків. Він додає шар абстракції над реактом, а одними з найголовніших його нововведень є рендеринг на серверній стороні та генерація статичних вебсайтів. Дуже багато React-вакансій для джунів мають серед вимог та побажань Next.js – якщо ви орієнтуєтеся на реакт, рекомендуємо ознайомитися з даним фреймворком. Nuxt – високорівневий фреймворк на базі Vue.js для масштабованого та інтуїтивно зрозумілого створення FullStack-вебзастосунків та вебсайтів. Зустрічається не часто у вимогах, але його вивчення може вигідно підсвітити вашу кандидатуру. Angular Material Технологія, на яку слід звернути увагу тим, хто планує розвиватися в напрямку Angular. Це бібліотека UI компонентів, яка дає доступ до готових візуальних рішень задля пришвидшення процесу верстання на Ангулярі. Бібліотека сповідує принципи Material Design, запроваджені компанією Google у 2014 році, які передбачають привабливий та інтуїтивно зрозумілий UI дизайн, котрий однаково гарно виглядатиме на різних пристроях. Необов’язкова для вивчення бібліотека, але часто зустрічається у вакансіях – її знання допоможе вам як мінімум виділитися серед інших Angular-кандидатів. TypeScript Кросплатформна строготипізована мова, яка є розширенням JavaScript. Строга типізація дозволяє зменшити кількість потенційних помилок у вихідному коді, написаному на TypeScript. Також ця мова реалізує концепції, які близькі до об'єктно-орієнтованих мов, таких як C#, Java та подібних. TypeScript підвищує швидкість та зручність написання комплексних програм, внаслідок чого їх стає легше підтримувати, масштабувати та тестувати. Відповідно до зарплатної аналітики від DOU (зима 2024), TypeScript обігнав JavaScript за популярністю і посідає перше місце серед українських розробників в категорії “Основна мова програмування”. У вакансіях ця мова зустрічається досить часто незалежно від цільового фреймворку. При цьому для Angular розробників знання TypeScript є обов'язковим. Радимо вивчити дану мову, а зробити це ви можете за допомогою нашого українськомовного курсу “TypeScript”. Інструменти керування станом програми (State Management) Великі вебзастосунки постійно зростають у складності, а тому зберігати дані, які можуть використовуватися в різних місцях, стає все складніше. Для вирішення цієї проблеми були вигадані окремі бібліотеки, що йдуть паралельно з фреймворками — вони служать для управління глобальним сховищем даних усього веб-застосунку і називаються менеджерами станів. Їх застосування вже стало стандартом у FrontEnd розробленні. Для девелоперів, які використовують Vue.js, це VueX, для React-розробників – Redux і MobX, для Angular-девів – RxJS, NgRx. Необов’язкові технології (але дуже корисні)   Патерни проєктування JavaScript Це найкращі практики, які описують типові способи вирішення поширених завдань, що виникають під час проєктування програмного забезпечення. Знання шаблонів проєктування дозволяє писати більш чистий, зрозумілий і читабельний код, а також уникати "винайдення велосипеда". Більше того, володіння патернами показує вашу грамотність як розробника і підвищує вашу цінність в очах роботодавця, що допоможе виділитися на тлі конкурентів. CSS-фреймворки Інколи у вакансіях для FrontEnd-початківців можна зустріти вимоги до володіння CSS-фреймворками. Найпопулярнішими є Bootstrap і Tailwind. Вони допомагають суттєво прискорити створення верстання за рахунок низки вбудованих можливостей. Bootstrap – результат старань команди з Twitter, який вийшов у світ в далекому 2011. Є повністю безкоштовним, має відкритий вихідний код і дозволяє створювати гнучкі, адаптивні вебінтерфейси під різні пристрої, використовуючи вже готові шаблони кнопок, форм, таблиць тощо. Tailwind більш сучасний та трендовий – 2017 року випуску, і при цьому відомий своїм високим ступенем кастомізації (на відміну від Bootstrap). Він не дає набору готових шаблонів (доступно тільки в платному Tailwind UI), проте дозволяє швидко створювати власні рішення за рахунок особливого синтаксису. В будь-якому випадку, рекомендуємо спробувати обидва інструменти, аби відчути їхню потужність, переваги та недоліки. GraphQL GraphQL є моделлю даних, яка часто використовується для побудови API для застосунку. Головна перевага перед REST API – наявність лише однієї точки входу, що дозволяє більш динамічно та гнучко визначати взаємодію з даними. Також GraphQL має такий синтаксис, який дозволяє працювати з будь-якою мовою програмування як на клієнті, так і на сервері – лишається тільки підключити необхідну бібліотеку до вашого проєкту для інтеграції GraphQL. На момент написання статті кожна шоста вакансія на Djinni у розділі “JavaScript / FrontEnd” з досвідом від 0 до 1 року мала серед обов’язкових або бажаних технологій GraphQL. jQuery Невелика, швидка та багатофункціональна JavaScript-бібліотека, для роботи з якою необхідно володіти HTML, CSS та JavaScript на базовому рівні. Вона покликана спростити програмування мовою JS. Дана бібліотека представляє об'ємні рішення поширених завдань у вигляді методів, що викликаються одним рядком коду. Незважаючи на те, що jQuery вже давно покинула зеніт популярності, поступаючись місцем фреймворкам JS, велика кількість сайтів все ще використовує цю бібліотеку, а деякі роботодавці вказують її серед вимог для Junior, особливо для джунів-верстальників. Лінтери Інструменти, які дозволяють аналізувати якість JavaScript-коду відповідно до стандарту ES. Вони вбудовуються в середовище розроблення і вказують на наявність невідповідностей стандарту коду, якщо такі є. Даний механізм корисний як для одноосібного розроблення (для самоконтролю), так і для командного, коли кожен розробник повинен слідувати тим самим мовним конструкціям, аби на виході отримати єдиний, цілісний проєкт. Один із найвідоміших лінтерів – ESLint. Це необов’язковий інструмент для роботодавця, але він дуже корисний для веброзробників у силу його можливостей з контролю якості коду. Тестування Jest та Cypress – головні інструменти модульного тестування, яке покладається на плечі розробника. Але що це таке? Unit тестування (воно ж – модульне тестування) – процес, який полягає у створенні тестів для перевірки працездатності окремих ділянок написаного програмістом коду. Виконується безпосередньо автором коду. Яку користь приносить Unit тестування: суттєве скорочення багів у коді; спрощення рефакторингу коду; забезпечення якісного відокремлення інтерфейсу від реалізації; краще розуміння написаного коду; можливість протестувати найдрібніші ділянки коду. Усі інструменти вчити не треба — достатньо навчитися працювати лише з одним із них. Gulp / Grunt Системи збирання, які автоматизують рутинні завдання розробників: мініфікацію коду, оптимізацію зображень, тестування, аналіз якості коду та інше. Підходять для розроблення невеликих проєктів. SVG Мова розмітки масштабованої векторної графіки. Зображення на сторінці, зроблені за допомогою SVG, коректно відображаються на екранах з різною роздільною здатністю, не втрачаючи при цьому своєї якості, на відміну від традиційних растрових .jpeg, .png та інших. SOLID принципи SOLID – це принципи, які є своєрідним ременем безпеки для тих, хто працює відповідно до парадигм об'єктно-орієнтованого програмування. Вони були створені з метою убезпечити ООП-орієнтованого розробника від незрозумілого, заплутаного спагеті-коду, який також ще й дуже важко підтримувати. SOLID – це акронім, який складається з п'яти букв, що кодують п'ять основних принципів: S - Single Responsibility Principle (принцип єдиної відповідальності) O - Open-Closed Principle (принцип відкритості-закритості) L - Liskov Substitution Principle (принцип підстановки Барбари Лісков) I - Interface Segregation Principle (принцип розділення інтерфейсу) D - Dependency Inversion Principle (принцип інверсії залежностей) Володіння цими принципами дозволяє грамотно проєктувати та розробляти такі програмні системи, які з великою ймовірністю зможуть тривалий час розвиватися, розширюватися та підтримуватися. Хоча SOLID принципи написані переважно для ООП, їхні ідеї цілком застосовні і до сучасного JavaScript розроблення, що допоможе фронтенд розробникам створювати більш чистий та лаконічний код. Зарплати FrontEnd розробників DOU Звернемося до вже згаданої зарплатної аналітики від української IT-спільноти DOU за зиму 2024 року. Медіанна зарплата всіх українських розробників, які взяли участь в опитуванні (а їх 5959), наступна: Intern Software Engineer – 350 USD; Junior Software Engineer – 950 USD; Middle Software Engineer – 2500 USD; Senior Software Engineer – 4738 USD. Тепер поглянемо на медіанну ЗП FrontEnd розробників: Junior – 900 USD; Middle – 2400 USD; Senior – 4600 USD. На всіх позиціях зменшення винагороди у порівнянні з аналітикою півроку тому. Виходить, медіана фронтендників майже на всіх тайтлах трохи менша, ніж загальна медіана, проте розрив досить невеликий. Djinni Тепер перейдемо до зарплатної аналітики українського сервісу Djinni і оберемо розділ “JavaScript / FrontEnd” та розглянемо попит за останні 6 місяців. Маємо 17818 кандидатів, зарплатні очікування яких становлять від 600 USD до 3000 USD при зарплатних вилках вакансій 2000-3300 USD. На 1 вакансію в середньому припадає 114.4 відгуки, а кількість пропозицій на кандидата – 0.2. Stack Overflow Developer Survey 2023 Погляньмо, скільки заробляє цей фахівець за межами України. У цьому нам допоможуть результати опитування Stack Overflow Developer Survey 2023 (понад 90 000 респондентів із США, Індії, Німеччини, Канади, Великої Британії та інших країн). Ця цифра – 59 970 USD на рік (приблизно 5000 USD на місяць). При цьому буде важливо сказати, що фронтендники з даного опитування мають у середньому 8 років професійного кодингу – і це один із найнижчих показників. Нижче за них розташовуються лише Data Scientist / ML Specialist – 7.9 років досвіду, а також студенти, які мають трохи більше 2.8 років досвіду у професійному створенні коду. Чому так багато технологій? Поради новачкам FrontEnd Український ринок FrontEnd дуже сильно перегрітий кандидатами. Роботодавці, звісно, користуються цією ситуацією: виставляють більше вимог до кандидатів і паралельно знижують рівень ЗП. Таким чином вони хочуть відфільтрувати слабких кандидатів і отримати якомога скіловішого фахівця за якомога нижчою ціною, оскільки в Junior-девелопера треба вкласти значну кількість часу та грошей, доки він вийде на таку продуктивність, яка приносить хоч якісь прибутки.  Наша стаття враховує ці нюанси, а тому ми відобразили максимальну кількість технологій, які ви з великою ймовірністю зустрінете у більшості вакансій. Не всі інструменти потрібно знати та вчити, але чим багатший ваш інструментарій, тим більші шанси на працевлаштування. Декілька порад для початківців, які вирішили підкорити FrontEnd: Робіть пет-проєкти і публікуйте їх на GitHub. Створюйте застосунки, які вирішуватимуть ваші повсякденні задачі, і намагайтеся застосувати в них якомога більше вивчених вами технологій. Це дозволяє підтвердити ваші знання на практиці та демонструє потенційному працедавцеві ваші навички кодингу. Використовуйте ШІ. Штучний інтелект буде корисний в низці задач: прискорення розроблення; генерування ідей для пет-проєктів; пояснення складних тем; асистенція при написанні коду тощо. Розвивайте власний бренд. Чим більша ваша популярність в ІТ-спільноті, тим більші шанси запрошення на співбесіду. Для цього найкраще підходить LinkedIn – соціальна мережа для встановлення робочих контактів, але також можна підключити Instagram, YouTube тощо. Публікуйте пости з корисною інформацією, діліться вашими досягненнями, дієвими порадами та особистими враженнями щодо вивчення FrontEnd, і т. д. За вами стануть спостерігати багато ІТ-фахівців, які можуть самі завітати до вас із пропозицією роботи або порекомендувати вас комусь. Не нехтуйте вивченням англійської мови. English є супер важливим в умовах перегрітого ринку джунів – треба обов’язково мати B1. Якщо є декілька сильних кандидатів, які приблизно однакові за soft & hard скілами, роботодавець обере того, хто краще знає англійську. Також згадана аналітика DOU доводить – чим краще знаєш англійську, тим на більшу ЗП можеш претендувати. Менторинг. Максимально вдале рішення – знайти собі ментора. Він буде наглядати за вашим навчанням та прогресом, підкидати задачі/проєкти, давати корисні поради, відповідати на питання тощо. А наприкінці вашого навчання навіть може запропонувати вільне місце в компанії або ж порекомендувати знайомим айтівцям. Відточуйте навички програмування у Codewars або LeetCode. Це спеціальні сервіси для програмування, де ви обираєте собі задачу (є різні рівні складності) та виконуєте її, розвиваючи навички кодингу необхідними мовами. Дуже зручно і корисно, враховуючи, що на співбесіді можуть бути схожі live-coding завдання, а також, що LeetCode використовують девелопери, які готуються до інтерв'ю в топових ІТ-компаніях (Facebook, Google, Amazon тощо). Також на ITVDN є спеціальний інтерактивний практикум, де ви можете “набити руку”. Колаборація з розробниками-початківцями. Долучайтеся до команд однодумців, де ви працюватимете спільно над проєктом, аби отримати навички роботи в команді. Звісно, це не дорівнює комерційному досвіду, який прагнуть побачити у вас роботодавці, але дозволяє попрацювати в умовах, що максимально наближені до реальних. Відвідуйте тематичні ІТ-події в офлайн форматі. Там ви зможете поспілкуватися з іншими девелоперами, показати себе і розширити свою мережу корисних знайомств. Контактувати з ІТ-фахівцями на таких івентах обов’язково! Інакше ви просто дарма витратите час та гроші. Пройдіть пробне інтерв’ю за донат. Ви можете місяцями не отримувати запрошення на співбесіду, через що страждатиме ваша мотивація та впевненість. Аби не падати духом і дати собі об’єктивну оцінку, домовтеся про інтерв’ю з якимось FrontEnd спеціалістом, який проведе вам технічну співбесіду за донат і надасть свої поради щодо подальшого кар’єрного шляху – наразі це популярна тема. Пробне інтерв’ю з рекрутером. Можливо, проблема відсутності запрошень криється у вашому CV або погано оформленому LinkedIn-акаунті? Із цим допоможе розібратися рекрутер або кар’єрний консультант, який надасть свої послуги за гроші або відповідний донат на збройні сили. Стосовно двох останніх пунктів – на ITVDN всі студенти, котрі навчаються у форматі онлайн занять із тренером у групі (Live Online), безкоштовно отримують персональну допомогу щодо подальшого працевлаштування, а саме: індивідуальну консультацію задля визначення персональних цілей; допомогу в складанні CV (резюме) та Cover Letter (супровідного листа); допомогу з оформленням LinkedIn-акаунту; проведення тестового інтерв’ю з розгорнутим фідбеком; формування стратегії пошуку роботи; надання додаткових корисних матеріалів. Підсумки FrontEnd розробник – досить універсальний боєць у світі веброзроблення. Він повинен вміти і верстати, і створювати логіку роботи клієнтської частини, і розуміти роботу серверної частини вебзастосунку. Для опанування такого великого інструментарію варто запастися часом, терпінням та завзятістю. Зазначені у статті засоби розроблення сайтів також мають аналоги, оскільки для вирішення різних завдань підходять різні вебінструменти. Однак ми вибрали найпопулярніші та найефективніші з них. Якщо у вас є бажання опановувати цю професію і ви хочете самостійно “помацати”, чим займається фронтенд розробник, на ITVDN створено комплексну програму навчання у форматі відео навчання, яка включає 51 відео курс. Якщо ж вам більше до вподоби живе онлайн навчання з тренером та у групі з іншими учнями, пропонуємо формат Live Online для вивчення спеціальності FrontEnd (Angular або React напрямки). Бажаємо вам успіхів у досягненні ваших цілей! Залишайтеся з ITVDN!

Code Wars CodinGame Cyber Dojo CodeCombat CodeMonkey CSS Diner Flexbox Froggy Flexbox Defense Ruby Warrior Untrusted Robocode CheckIO Elevator Saga Вывод Когда начинали писать код многие из современных гуру программирования, их возможности в обучении были ограничены – книги, справочники, наборы технической документации и спецификаций. Со временем ситуация улучшилась. Начали появляться  различные онлайн ресурсы.  Появилось множество видеоуроков. Родилось и набрало силы новое направление в обучении – онлайн обучение. Онлайн обучение прошло долгий путь в последние несколько лет. Появились интерактивные курсы, в сети Интернет выложено множество видеоуроков, различные онлайн-уроки проводятся с квалифицированными тренерами по множеству направлений. Одним из новых и очень увлекательных способов интерактивного онлайн обучения программированию стали игры, в которых нужно выполнять задания с использованием различных языков программирования. Конечно, одно только написание кода в играх не сделают из вас профессионального разработчика, однако такие игры могут стать действительно полезным способом отработать навыки  и поддержать интерес к обучению. Игры увлекают. Вы внезапно обнаружите, что потратили несколько часов на закрепление своих навыков программирования, даже не осознавая этого. 1. Code Wars Code Wars поможет вам улучшить ваши навыки написания кода, соревнуясь с другими разработчиками. Игра предлагает большое разнообразие языков, включая JavaScript, Swift, PHP, Python, Ruby и Haskell. Сначала вам нужно будет подтвердить ваши навыки, пройдя базовый тест на понимание языка, который вы хотите практиковать. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: Clojure, C, C++, C#, Crystal, Dart, Elixir, F#, Go, Haskell, Java, JavaScript, PHP, Python, Ruby, Rust, Shell, SQL, Swift, TypeScript.   2. CodinGame CodinGame предлагает набор бесплатных игр, которые помогут вам в освоении более 25 различных языков программирования, включая C#, Java, Python, JavaScript, Ruby и PHP. Вы можете выполнять игровые практические задания для проверки навыков или посмотреть примеры, объясняющие различные конструкции языка. Одна из особенностей CodinGame заключается в том, что вы можете играть с друзьями или коллегами, а также участвовать в международных соревнованиях по программированию. Материалы игр доступны на английском и французском языках. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский, Французский. Доступные языки программирования:  Bash, C, C++, C#, Clojure, Dart, F#, Java, JavaScript, Go, Groovy, Haskell, Kotlin, Lua, Objective‑C, OCaml, Pascal, Perl, PHP, Python2, Python3, Ruby, Rust, Scala, Swift, VB.NET. 3. Cyber Dojo В Cyber Dojo есть практические упражнения и задачи для десятков языков программирования, включая C#, Java, C++, Ruby, JavaScript, PHP, Python и другие. Каждое упражнение предполагает определенную задачу, чтобы дополнить имеющийся код, выполняющий определенную задачу. Несмотря на то, что это не совсем игра, а скорее большой набор интересных задач, это все же отличный способ попрактиковать свои навыки в коде. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: Assembler, BCPL, Bash, C, C#, C++, Chapel, Clojure, CoffeeScript, D, Elixir, F#, Fortran, Go, Groovy, Haskell, Java, JavaScript, Kotlin, PHP, Pascal, Perl, Python, R, Ruby, Swift, VHDL, assert, VisualBasic, NUnit. 4. CodeCombat CodeCombat ориентирован на учителей и учеников, но играть может каждый. Эта достаточно яркая и увлекательная платформа подойдет для практики в таких языках как Python, JavaScript, CoffeeScript, HTML и CSS. На начальном уровне подземелий вы будете перемещать своего персонажа по различным уровням игры, используя базовые команды. Далее команды усложняются. Можно играть самому, участвовать в соревнованиях и многопользовательских вариантах игр – все это поможет вам не заскучать во время отработки в этой игре полученных ранее навыков программирования. Имеется возможность играть бесплатно, но получить доступ ко всему контенту можно только по платной подписке. Особенности игры: браузерная игра, есть платный контент. Доступные языки интерфейса: Английский, Русский, Украинский и еще 57 языков. Доступные языки программирования: Python, JavaScript, CoffeeScript, HTML и CSS. 5. CodeMonkey CodeMonkey это онлайн игра, которая обучает программированию с использованием CoffeeScript. CoffeeScript – это современный открытый язык программирования, который по своей сути является  просто надстройкой и синтаксическим сахаром для JavaScript. В основном CoffeeScript используется для веб-приложений. В игре пользователи с помощью кода контролируют поведение обезьяны и помогают ей собирать бананы. CodeMonkey предназначен скорее для обучения детей. Однако данная игра подойдет и взрослым, желающим в простой игровой манере закрепить знания языка. Несмотря на относительно детский интерфейс игры, задачи в CodeMonkey затрагивают такие темы языка программирования, как: объекты, вызовы функций, аргументы, циклы, переменные, массивы, цикл for, определение функций, булевые условия, цикл until, if и if-else условия, булевые операторы, события клавиатуры и мыши.   Имеется бесплатная триальная версия и ряд премиум подписок, позволяющих, в частности, учителям подключать учеников для обучения и контроля выполнения заданий. Особенности игры: браузерная игра, триальная версия на 14 дней и платная подписка. Доступные языки интерфейса: Английский, Русский, и еще 16 языков. Доступные языки программирования:  CoffeeScript (JavaScript). 6. CSS Diner CSS Diner - простой, но достаточно увлекательный способ изучения языка CSS. Последовательно проходя 32 уровня, вы в игровой манере сможете познакомиться с основами работы CSS-селекторов. Начиная с простых селекторов по классам  и тэгам  уровни этой бесплатной игры постепенно усложняется, основываясь на том, что вы запомнили на предыдущих уровнях. Под конец вы будете использовать сложные структурные селекторы наподобие и их комбинации. Эта игра будет полезна тем, кто ищет удобный и нескучный инструмент, чтобы попрактиковаться в верстке. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: CSS. 7. Flexbox Froggy Flexbox Froggy это удобный инструмент для тех, кто уже имеет определенные навыки работы с CSS и хочет на практике, и в интересной манере, изучить основы такой технологии, как CSS Flexible Box Layout Module (или CSS Flexbox).  У Flexbox Froggy достаточно простой интерфейс, с помощью которого вы научитесь основам выравнивания во Flexbox, пока вы помогаете лягушонку Фрогги и его друзьям в их приключениях. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский, Русский, Украинский и еще 28 языков. Доступные языки программирования: CSS. 8. Flexbox Defense Flexbox Defense - еще один интересный способ попрактиковаться в навыках работы с Flexbox. Это игра по принципу Tower Defense. В этой игре вы будете с помощью CSS свойств размещать пушки в нужные места вдоль пути, чтобы победить встречные волны врагов. Вы получите нужную практику в интересной интерактивной манере, используя те же команды, что и в Flexbox Froggy. Особенности игры: браузерная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: CSS. 9. Ruby Warrior Если вы хотите изучать язык Ruby, тогда Ruby Warrior - это игра для вас. Управляя персонажем рыцаря с помощью кода на Ruby, вы будете выполнять игровые задачи, сражаться с монстрами и проходить подземелья. В игре есть простые и сложные задания, подходящие вашему уровню владения языком Ruby. Играя в Ruby Warrior вы улучшите ваши знания циклических и условных конструкций, создания и вызова методов. Авторизация в игре происходит через аккаунт Facebook. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: Ruby. 10. Untrusted Untrusted - это приключенческая игра, которая поможет вам проверить и закрепить ваши знания и навыки JavaScript для решения различных проблем. Вы будете использовать код на JavaScript, чтобы провести доктора Эвала по разным локациям электронной вселенной. Это увлекательная бесплатная игра поможет отработать достаточно сложные навыки применения JavaScript. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Языки: JavaScript 11. Robocode Robocode  подойдет вам, если вы когда-нибудь интересовались играми с противостоянием различных роботов. Играя в Robocode, вы приобретете и укрепите навыки программирования, создавая виртуальные боевые роботы-танки. Логику поведения этих роботов вы будете прописывать, используя языки Java или C# с помощью вашей IDE. Битвы с такими роботами затем разыгрываются в браузере на экране в режиме реального времени. Особенности игры: бесплатная игра; онлайн игра, но требует установки определенных модулей на ваш ПК. Доступные языки интерфейса: Английский. Языки: Java или C#. 12. CheckIO CheckIO  - это стратегическая игра, которая будет интересна как начинающим, так и уже продвинутым программистам. Вы будете выполнять  задания, которые помогут лучше изучить особенности выбранного языка программирования. Данная игра поможет вам вписать код лучше. Набирая балы за выполнение задания, вы можете также сравнивать свои ответы с ответами других игроков CheckIO. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: Python, JavaScript. 13. Elevator Saga Elevator Saga поможет вам протестировать ваши знания JavaScript во время решения  проблем, связанных с перемещением лифта и транспортировкой людей наиболее эффективным способом. Начинается задача с перемещения 15 человек, затем задачи становятся сложнее. Особенности игры: браузерная игра, бесплатная игра. Доступные языки интерфейса: Английский. Доступные языки программирования: JavaScript. Для удобства подбора подходящей игры мы собрали их в таблицу: Не всегда только суровая зубрежка и толстые учебники способствуют получению знаний. Обучение в игровой форме – это также один из лучших способов запомнить что-то новое или закрепить уже существующий навык. Вывод Многие из представленных в этом обзоре игр смогут реально помочь Вам улучшить понимание основного инструмента разработчика – языка программирования. Мы включили в этот обзор как игры, полезные при изучении языков программирования, так и те из них, что помогут лучше запомнить конструкции CSS, HTML, SQL. В некоторых играх вы будете выполнять готовые задачи, зарабатывая баллы и играя «против компьютера», некоторые игры позволят вам соревноваться с другими разработчиками в поиске решений чужих задач и предложении встречных задач. Учитесь, играючи и обучайтесь во время игры! Мы надеемся, что наша подборка игр поможет вам в этом. Также всем, кто изучает программирование, мы рекомендуем использовать интерактивный тренажер навыков ITVDN. В тренажере вас ждут задания, которые нужно выполнять, используя навыки программирования. За правильные решения вы будете получать баллы. В случае ошибки, вы сможете воспользоваться подсказками, но за использование подсказок будут сниматься баллы. Итак, ваша задача – выполнить все задания на тренажере, набрав максимальное количество баллов! На ITVDN доступны интерактивные тренажеры по таким языкам программирования и технологиям: HTML5&CSS3 (уровень Starter и Essential) JavaScript (уровень Essential и Advanced) Python (уровень Starter и Essential) Java Starter C# (уровень Starter и Essential) SQL Essential C++ (уровень Starter и Essential) Перейти в Тренажер ITVDN  

Переход от AngularJS к Angular 2 был огромным шагом вперед. При этом изменилось абсолютно все, без обратной совместимости. В то же время, Angular 4 добавила новые возможности, но при этом была обратно совместимой с Angular 2 (Версия Angular 3 была пропущена из-за @angular/router, который на момент релиза был 3.x, в то время как остальные пакеты 2.x. Для того, чтобы избежать путаницы и перевести все пакеты к одной версии, третья версия была пропущена). Angular 5 - это следующее обновление, в котором изменения затронули механизмы, работающие «под капотом». Многие пользователи ITVDN задают вопрос об актуальности учебных программ видеокурса Angular Essential, который записан с использованием версии 2 и видеокурса Angular Advanced (версия 4). Angular 5 не является чем-то абсолютно новым, это улучшение существующего Фреймворка. Чтобы понять и начать использовать возможности, которые появились в пятой версии, необходимо знать основы, которые не изменились, начиная со второй версии. Что нового в Angular 5? Улучшенный компилятор. В Angular 4 компилятор перекомпилировал все файлы при каждом изменении. В Angular 5 компилятор работает только с теми файлами, в которых есть изменения, а это значит, что время на компиляцию проекта в целом значительно снизилось. Оптимизированная сборка. В Angular CLI при использовании production build совместно с версией Angular 5 по умолчанию будет применяться build optimizer, который с помощью семантического анализа кода приложения сможет значительно уменьшить его размер. Акцент на упрощение разработки PWA (Progressive Web Apps). PWA - это приложения, которые объединяют в себе лучшее, что есть в веб-приложениях и лучшее, что есть в мобильных приложениях. PWA работают независимо от выбранного браузера; адаптируются под устройство - десктоп, планшет, телефон; могут работать без подключения к Интернет или при перебоях со связью; выглядят как приложение, установленное на устройство; благодаря Service Worker содержат актуальную обновленную информацию; являются безопасными, так как работают через HTTPS; используют возможности, подобные push уведомлениям; Installable – позволяют пользователю добавить приложение на домашний экран устройства. Поддержка TypeScript 2.4. Angular 5 поддерживает версию TypeScript 2.4, что дает возможность использовать новые возможности TS: перечисления, основанные на строках, улучшения проверки типов при работе с generic-типами, week-type-detection и прочее https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-4.html Pipes, адаптированные под локализацию. Обновленные Pipes для Date, Currency, Number и Percent, нет необходимости использовать i18n. https://github.com/angular/angular/blob/master/CHANGELOG.md#i18n-pipes Новые события Router. Используя события ActivationStart и ActivationEnd или ChildActivationStart и ChildActivationEnd, можно организовать отображения индикаторов загрузки при смене маршрута. HttpClient. Новый HttpClient был добавлен в версии 4.3, старый http клиент помечен как depreceted в новой версии. В Angular 6 старый клиент будет удален. Из преимуществ нового клиента можно выделить самостоятельное извлечение JSON без необходимости явного применения метода map и возможность применять interceptors. https://angular.io/guide/http Валидация форм. Теперь при работе с формами, c помощью свойства updateOn, можно определить, в какой момент будет происходить проверка – на событие blur или submit (вместо проверки на каждое событие input). Замена ReflectiveInjector на StaticInjector. Изменен механизм для внедрения зависимостей. Для нового StaticInjector не нужен полифил Reflect (но при использовании JIT данные полифил все равно нужно будет использовать), что может уменьшить размер приложения. Angular CLI 1.5 использует Angular версии 5. Улучшение NgZone. NgZone стала еще быстрее, также библиотеку можно отключить для применения другой библиотеки для улучшения производительности. Улучшенный RxJS. Поддержка обновлена до версии 5.5.2 и выше. Поддержка новых pipable operators https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md Angular 5 получился компактней и быстрее, чем его предшественники, и не обошелся без новых возможностей. Запуск следующей версии Angular планируется на 28 марта 2018 года. Будем ждать улучшений и новых возможностей от команды Angular.

ASP.NET Core представляет собой существенный редизайн ASP.NET. В этом разделе представлены новые концепции в ASP.NET Core, а также содержатся объяснения, как они помогают разрабатывать современные веб-приложения.   Что такое ASP.NET Core? ASP.NET Core – это новый общедоступный и кроссплатформенный фреймворк для создания современного облака приложений, связанных с подключением к интернету, таких как веб-приложения, приложения для интернета вещей и мобильных серверов. Приложения ASP.NET Core могут работать на .NET Core или на полной платформе .NET Framework. Этот фреймворк был спроектирован таким образом, чтобы обеспечить оптимизированную платформу разработки для приложений, которые перемещаются в облако или выполняются локально. Он состоит из модульных компонентов с минимальной перегрузкой, поэтому вы сохраняете гибкость при построении своих решений. Существует возможность разрабатывать и запускать кроссплатформенные ASP.NET Core приложения на Windows, Mac и Linux. Фреймворк ASP.NET Core общедоступен на GitHub. Зачем строить ASP.NET Core? Первая предварительная версия ASP.NET появилась почти 15 лет назад как часть платформы .NET Framework. С тех пор миллионы разработчиков использовали технологию для создания и запуска отличных веб-приложений. За эти годы удалось добавить и разработать множество возможностей. ASP.NET Core имеет ряд архитектурных изменений, которые приводят к более компактной и модульной структуре. ASP.NET Core больше не основывается на файле System.Web.dll. Он основан на наборе детальных и хорошо структурированных пакетов NuGet. Это позволяет оптимизировать приложение с помощью пакетов NuGet, которые вам необходимы. Преимущества меньшей площади поверхности приложения включают: более строгую защиту, сниженный уровень обслуживания, улучшенную производительность и снижение затрат в модели «плати за то, что используешь». С помощью ASP.NET Core вы достигните таких основных улучшений: Единая история создания для Web UI и Web APIs Интеграция современных клиентских фреймворков и схем разработки Конфигурация, готовая для работы в облаке и основывающаяся на окружении Встроенная поддержка внедрения зависимостей Новый легкий и модульный HTTP-запрос Возможность хостироваться в IIS либо в вашем собственном приложении Фреймворк построен на платформе .NET Core, которая поддерживает истинное совместное управление версиями приложений Поставка как полные NuGet пакеты Новый инструментарий, который упрощает разработку современных веб-приложений Сборка и работа кроссплатформенных ASP.NET приложений на Windows, Linux и Mac Общедоступный и социально-ориентированный фремворк   Создание web UI и web APIs с использованием ASP.NET Core MVC Вы можете создавать службы HTTP, которые охватывают широкий круг клиентов, включая браузеры и мобильные устройства. Поддержка нескольких форматов данных и согласования содержимого – уже встроены. ASP.NET Core - идеальная платформа для создания web APIs и RESTful приложений на .NET Core. Вы можете создавать хорошо факторизованные и тестируемые веб-приложения, которые следуют шаблону Модель-Вид-Контроллер (MVC). Razor обеспечивает продуктивный язык для создания Views Тег-хэлперы позволяют серверному коду участвовать в создании и рендеринге HTML- элементов в файлах Razor Привязка модели автоматически отображает данные из HTTP-запросов в параметры метода действия Проверка модели автоматически выполняет проверку на стороне клиента и на стороне сервера   Разработка клиентской стороны ASP.NET Core предназначен для беспроблемной интеграции с различными клиентскими платформами, включая AngularJS, KnockoutJS и Bootstrap. Материал подготовлен на основе статьи: https://docs.microsoft.com/en-us/aspnet/core/. Авторы: Daniel Roth, Rick Anderson, Shaun Luttin

Введение JQuery - огромная библиотека. Она пришла приблизительно в то время, когда IE6 был браузером номер один. Тогда было много специфических моментов и разногласий, что делало процесс разработки утомительным и JQuery был идеальным инструментом для написания кроссбраузерного кода. С тех пор, однако, веб-браузеры намного усовершенствовались. Вы можете с удобством использовать все возможности, предоставляемые ES5, и имеете в полном распоряжении огромную API-библиотеку HTML5, которая делает работу с DOM-элементами намного приятнее. Разработчики теперь могут выбирать, что же можно оставлять из JQuery для некоторых проектов, продолжая сохранять свою производительность. Не поймите неправильно – JQuery по-прежнему отличная библиотека и чем чаще вы будете использовать ее, тем лучше. Тем не менее, для небольших проектов, например, для простых страниц с ограниченным JS взаимодействием, расширениями браузеров и мобильных сайтов, вы можете использовать vanlla JS.  Вот 10 советов, которые помогут в вашей деятельности. 1. Прослушивание на готовность документа (Document Ready) Первое, что вы делаете, когда пишете JQuery, это упаковывание своего кода в вызов $(document).ready()  для того, чтобы определить готовность DOM к манипуляциям. Без JQuery у вас есть событие DOMContentLoaded. Вот как оно используется. 2. Выбор элементов Давным-давно Вы могли только выбирать элементы по ID, классу и имени тега, а JQuery с ее умными CSS-селекторами выступала своеобразным спасателем. Браузеры исправили это и представили две важные API - querySelector и querySelectorAll. 3. Установка и удаление слушателей событий Прослушивание событий - фундаментальная часть построения веб-приложения. Принято было использовать две основные стороны, которые отличались тем, каким способом все было сделано - IE и остальное. Но сегодня мы просто используем addEventListener. 4. Манипулирование классами и свойствами Манипулирование именами классов элементов без JQuery было очень неудобно использовать. Но проблема была решена благодаря свойству ClassList. И если нужно управление атрибутами, Вам нужен SetAttribute. 5. Получение и установка содержимого элементов JQuery имеет удобный текст и html ( )методы. Вместо их можно использовать свойства textContent и innerHTML, которые были у нас в течение очень долгого времени. 6. Установка и удаление элементов Хотя JQuery и делает все намного проще, добавление и удаление DOM-элементов невозможно без простого JavaScript. Здесь показано, как добавлять, удалять и заменять любые элементы, какие Вы только захотите. 7. Прохождение по DOM дереву Любой настоящий JS-ниндзя знает, что есть много возможностей, скрытых в DOM. По сравнению с JQuery простые интерфейсы DOM предлагают ограниченную функциональность для выбора нескольких уровней. И, тем не менее, есть множество вещей, которые Вы можете делать,  путешествуя по DOM - дереву. 8. Обработка массивов Некоторые из утилитных методов, которые предоставляет JQuery, доступны со стандартом ES5. При переборе массивов можно использовать forEach и map вместо их JQuery аналогов - each() и map(). Просто будьте осторожны при различиях в аргументах и значениях по умолчанию в обратных вызовах. 9. Animations Методы анимации JQuery самым лучшим образом подходят ко всему, что Вы бы хотели «оживить» и, если нужны сложные анимации из скриптов в приложении, Вы должны по-прежнему иметь дело с ней. Но благодаря всем чудесам CSS3, некоторые простые случаи можно обработать с помощью легкой библиотеки Animate.css, которая позволяет запускать анимацию, добавляя или удаляя имена классов элементов. 10. AJAX Ajax – это еще одна технология, которая используется при кросс-браузерном беспорядке. Хорошая новость - теперь можно использовать один и тот же код везде. Плохая новость - по-прежнему громоздко создавать экземпляры и отправлять AJAX-запросы с XMLHttpRequest, так что лучше предоставить это библиотеке. Но Вы не должны подключать всю JQuery только для этого. Вы можете использовать одну из самых многочисленных и легких библиотек, которые доступны. Вот пример построения запроса AJAX напрямую, и с помощью небольшой библиотеки запросов. Выводы Стремление к минимальному, нулевому количеству наворотов на веб-странице - достойная цель, что окупит себя быстрой загрузкой и лучшим пользовательским опытом. Но будьте осторожны - никто не выиграет, если Вы будете изобретать велосипед, который уже используется в JQuery. Не жертвуйте хорошей практикой разработки только для того, чтобы сократить количество кода. Но есть множество мест, где на сегодня советы вполне применимы. Попробуйте следовать ванили в следующий раз, это может быть все, что вам нужно! Источник: http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/