Введение Данная статья ориентирована на тех, у кого уже есть небольшой опыт работы с Unity. В первую очередь мы рассмотрим воссоздание механики управления главного героя игры Super Meat Boy. Также узнаем, как построить сцену, имея скриншот уровня оригинальной игры. Все материалы, использованные в данном примере, принадлежат разработчикам оригинальной игры.  Для начала стоит сказать пару слов о фоновых картинках для уровней. Чтоб не создавать весь уровень из отдельных элементов, редактируем найденные на просторах интернета скриншоты, на которых вырезаем главного героя, таймер с левой части экрана и следы крови. Теперь у нас есть подготовленный фон. Элементы Уровня Поверхности, по которым можно двигаться, задаем с помощью компонента Polygon Collider 2D. Места, где игрок может умереть (выпасть из поля зрения камеры или попасть на режущую пилу) обозначаем тегом killzone. К ним крепим данный скрипт: void OnTriggerEnter2D(Collider2D other)     {         if (coll.tag =="killzone")         {            Application.LoadLevel(Application.loadedLevelName);         }           } При прикосновении коллайдер игрока вызывает срабатывание скрипта и подгружает этот же уровень, то есть происходит рестарт. Аналогично работает и загрузка следующего уровня, единственным отличием является передаваемое методу Application.LoadLevel() текстовое значение с названием уровня. Этот скрипт прикрепляем к объекту endTarget. Следы крови размещаем на все потенциально доступные игроку поверхности (кроме уровня песочницы, где они находятся на каждой из 4 сторон блока). Они состоят из отключенного по умолчанию компонента Sprite Renderer, компонента Box Collider 2D с активированным значением IsTrigger и скрипта, который собственно и включает Sprite Renderer при коллизии с игроком.  SpriteRenderer sR;       void Start()     {         sR = transform.GetComponent<SpriteRenderer>();     }       void OnTriggerEnter2D(Collider2D coll)     {         if (coll.tag =="Player")         {            sR.enabled = true;         }             } Получаем компонент Sprite Renderer во время выполнения при помощи метода GetComponent(), вызываемого на данном объекте. Если тег прикасающегося коллайдера равен "Player", то включаем Sprite Renderer, который отображает картинку крови на уровне.  Создание персонажа Внешний вид персонажа В оригинальной игре мит-бой тщательно анимирован и имеет большое количество визуальных эффектов, большинство из которых мы воссоздавать не будем по причине нецелесообразности. Вместо анимации будем использовать простую подмену спрайтов при смене состояния игрока. Для главного персонажа нам понадобятся  компоненты Rigid Body 2D, Sprite Renderer, Box Collier 2D, Circle Collider 2D и скрипт управления, который мы рассмотрим чуть ниже. В инспекторе на компоненте Rigid Body 2D ставим галочку на Fixed Angle, в Circle Collider 2D на IsTrigger. Этим мы зафиксировали персонажа в одном положении и указали, что Circle Collider 2D выполняет функцию триггера. Радиус окружности коллайдера должен быть таким, что немного выходит за рамки квадратного коллайдера. Он является триггером появления следов крови на уровне. Объявление переменных Для корректной имитации поведения нам понадобятся переменные для скорости ходьбы, бега, прыжка, а также ускорения в воздухе и на земле.     public float jumpForce = 50f;     public float speed = 10;     public float speedMultiplier = 4f;     public float acceleration = 5f;     public float airAcceleration = 2f; Для данных переменных экспериментальным путем были подобраны значения, которые больше всего напоминают поведение оригинала. Также нам понадобятся переменные для контроля вида персонажа и собственно его физика. Они позже будут инициализированы уже знакомым нам способом во время выполнения. SpriteRenderer spriteRender; Rigidbody2D rBody; Для правильного отображения разных состояний мит-боя будем использовать несколько картинок, поэтому берем переменные типа Sprite. //спрайты разных состояний     public Sprite jumpSprite;     public Sprite RunSprite;     public Sprite IdleSprite;     public Sprite SlidingOnAWallSprite; Данные спрайты будем инициализировать не в рантайме, а в редакторе, где проводим им ссылку на картинку для каждого состояния. И напоследок еще понадобятся данные о высоте, толщине персонажа и состояние прыжка.   float playerWidth;     float playerHeight;     //флаг состояния прыжка     bool ableToJump = true; Управление главным героем После объявления всех нужных нам переменных, переходим к реализации. Зарезервированный метод Awake() отработает сразу поле загрузки уровня, поэтому в нем и инициализируем переменные толщины, высоты и другие.  void Awake()     {         //инициализация этих переменных произойдет сразу после запуска сцены         playerWidth = GetComponent<BoxCollider2D>().bounds.extents.x + 0.05f;         playerHeight = GetComponent<BoxCollider2D>().bounds.extents.y + 0.05f;         rBody = transform.GetComponent<Rigidbody2D>();         spriteRender = transform.GetComponent<SpriteRenderer>();     } Переменные playerHeigth и palyerWidth будут полезны при определении, находится ли игрок на земле. К ним прибавляем небольшой зазор, который не даст лучу от персонажа заметить его же коллайдер. Метод IsOnGround() возвращает true в случае, если хотя бы один из созданных лучей касается коллайдера. Для удобства создаем два луча – с левой нижней части коллайдера персонажа и правой соответственно. При создании отнимаем высоту, учитывая вертикальный и горизонтальный зазоры. Этот способ позволит уйти от многих проблем при прыжках возле стен. public bool IsOnGround()     {         //создаем луч длинной 0.01 справа с направлением вниз         bool rightBottom = Physics2D.Raycast(             new Vector2(transform.position.x + playerWidth - 0.055f,             transform.position.y -playerHeight), -Vector2.up, 0.01f);         //аналогичный луч слева         bool leftBottom = Physics2D.Raycast(               new Vector2(transform.position.x - playerWidth + 0.055f,               transform.position.y - playerHeight),-Vector2.up, 0.01f);         return (rightBottom || leftBottom) ? true : false; } Метод Run() отвечает за движение игрока по горизонтали. Параметр int directionX отвечает за направление, если число позитивное, то двигаемся вправо, негативное – влево соответственно. Если нажат LShift, то учитывается умножитель ускорения. Если игрок находится в воздухе, то множим на переменную ускорения в воздухе.  private void Run(bool onGround, int directionX)     {         rBody.AddForce(new Vector2((directionX * speed - rBody.velocity.x) *             (Input.GetKey(KeyCode.LeftShift) ? speedMultiplier : 1f) *            (onGround ? acceleration : airAcceleration), 0));     } Метод JumpNearWall() отвечает за прыжок персонажа возле стены. Аналогично методу Run(), он принимает параметр int directionX. private void JumpNearWall(int directionX)     {         //убираем инерцию         rBody.velocity = Vector2.zero;         rBody.AddForce(new Vector2(directionX *             jumpForce * airAcceleration * 3,             jumpForce * airAcceleration * 5));         StartCoroutine(JumpCoolDown());     } В конце тела этого метода вызываем корутин, который будет убирать возможность прыгать суммарно на 0.1 секунд. IEnumerator JumpCoolDown()     {         yield return new WaitForSeconds(0.05f);         ableToJump = false;         yield return new WaitForSeconds(0.05f);         ableToJump = true;     } Метод FlipPlayer() меняет направление используемого спрайта игрока. void FlipPlayer(bool toLeft)     {         //если повернут направо, а нужно налево         if ((transform.localScale.x < 0 && toLeft) ||         //если повернут налево, а нужно направо             (transform.localScale.x > 0 && !toLeft))         {             transform.localScale = new Vector3(transform.localScale.x * -1f,                 transform.localScale.y, transform.localScale.z);         }     } Метод FixedUpdate() является зарезервированным и вызывается независимо от количества отработанных кадров. Для начала получаем значение, касается ли персонаж пола и стен слева и справа.  bool onGround = IsOnGround();         bool nearLwall = Physics2D.Raycast(             new Vector2(transform.position.x - playerWidth, transform.position.y),             -Vector2.right, 0.01f);         bool nearRwall = Physics2D.Raycast(             new Vector2(transform.position.x + playerWidth, transform.position.y),             Vector2.right, 0.01f); Присваиваем спрайт по умолчанию – спрайт безделья.  spriteRender.sprite = IdleSprite; Теперь считываем нажатие кнопок управления. if (Input.GetKey(KeyCode.RightArrow))         {             //двигаем персонажа в позитивном направлении по оси Х             if (!nearRwall) Run(onGround, 1);             //присваиваем новый спрайт и меняем его направление             spriteRender.sprite = RunSprite;             FlipPlayer(false);         }         else if (Input.GetKey(KeyCode.LeftArrow))         {             //двигаем персонажа в негативном направлении по оси Х             if (!nearLwall) Run(onGround, -1);             spriteRender.sprite = RunSprite;             FlipPlayer(true);         } Если персонаж находится на поверхности и нажат пробел, то выполняем прыжок и активируем таймер до следующего прыжка. if (Input.GetKeyDown(KeyCode.Space) && onGround && ableToJump)         {             //выполняем "прыжок с земли"             rBody.AddForce(new Vector2(0, jumpForce * acceleration* 1.7f));             spriteRender.sprite = jumpSprite;             //таймер до следующего прыжка             StartCoroutine(JumpCoolDown());         } В противном случае разделяем поведение для прыжка возле левой и правой стенки.             if (Input.GetKeyDown(KeyCode.Space) && nearLwall && ableToJump)             {                 //прыжок от стены вправо                 JumpNearWall(1);             }             if (Input.GetKeyDown(KeyCode.Space) && nearRwall && ableToJump)             {                 //прыжок от стены влево                 JumpNearWall(-1);             } Если игрок возле стенки, меняем спрайт и уменьшим скорость вертикального движения при прикосновении к стене после прыжка. Поворачиваем спрайт в нужном направлении и скрипт управления готов. spriteRender.sprite = SlidingOnAWallSprite;                 rBody.velocity = new Vector2(rBody.velocity.x,                     (rBody.velocity.y > 9.0f) ? rBody.velocity.y * 0.6f : rBody.velocity.y);                              if (nearLwall) FlipPlayer(true);                 else FlipPlayer(false); Теперь осталось опробовать все на практике. К данной статье прикреплен проект с уровнем «песочница», который можно изменить, как угодно добавив или убрав элементы. 

Введение Привет всем. Многие студенты, которые решили связать свою жизнь с програмированием, задаются такими вопросами: - что выбрать своим главным инструментом в работе? - чем пользуется большинство? - чем пользоваться при написании своего кода? - что лучше? На эти вопросы нет однозначного ответа, каждый редактор по-своему хорош. Но постараюсь описать главные возможности тех редакторов, с которыми я сам столкнулся и пользовался в своей практике. Сразу внесем ясность и расставим точки над i. Средства разработки делятся на два главных класса: 1 – Интегрированные среды разработки (IDE) 2 - Текстовые редакторы (text editor) Официальное определение  интегрированная среда разработки можно найти по адресу: https://ru.wikipedia.org/wiki Официальное определение текстовый редактор по адресу: https://ru.wikipedia.org/wiki Попытаюсь объяснить  разницу между двумя этими классами своими словами. Интегрированная среда разработки - это как швейцарский нож или трактор, он мультифункционален, а следственно, и граничен. Может делать много, но некоторые вещи делает не так, как нам хотелось бы. Посудите сами: трактор ведь может тянуть тяжелый груз, копать и, главное, может передвигаться. Но все это он делает медленно. К примеру, если стоит задача переместиться из пункта “А” в пункт “Б” (что является одной из функций трактора), для этого лучше пригодится спорткар или обычный легковой автомобиль, для этой операции нами не нужен трактор со всеми его функциями. Следовательно, мы можем сделать вывод, что для определенных операций нам нужны определенные инструменты. В этой статье я не буду рассматривать IDE и их фичи (feature). Хочу рассказать о главных текстовых редакторах и их возможностях. Мой TOP текстовых редакторов: 1. Sublime Text 2. Brackets 3. Visual Studio Code (на этом месте был Atom) Пробовал, но не понравились/не подошли, по каким-либо причинам (поэтому не рассматриваю их тут) 1. Notepad++ (Сайт https://notepad-plus-plus.org/) 2. Komodo Edit (Сайт http://komodoide.com/komodo-edit/) 3. Atom (Сайт https://atom.io/) 4. Textmate (Сайт https://macromates.com) Итак ,начнем. Sublime Text 3 сайт: http://www.sublimetext.com/3 Чем нравится: кроссплатформенный легкий большая и понятная библиотека плагинов (дополнений) легко настроить под себя Что следует сделать после установки. Зайти на сайт https://packagecontrol.io/installation И сделать все согласно инструкции, открыть консоль Саблайма: найти вкладку View  и кликнуть Show Console. В появившемся снизу поле ввода вставить следующий код: import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) Должно получиться вот так: Жмем Enter. Так мы установили Package Control в наш Sublime. Теперь мы можем устанавливать плагины в редактор, нажав сочетание клавиш Ctrl+Shift+P on Windows/Linux, ⇧⌘P on OS X На сайте https://packagecontrol.io/ вы найдете множество плагинов с детальным описанием, руководством установки и руководством использования. Теперь о плагинах. Плагин – грубо говоря, это дополнение программы. Официальное определение https://ru.wikipedia.org/wiki Плагины, которые пригодились мне в работе, возможно, пригодятся и вам. 1. Emmet - https://packagecontrol.io/packages/Emmet Плагин, который помогает быстро набирать код. С помощью шпаргалки вы быстро научитесь быстро набирать сложные конструкции html, указав лишь название тега и  порядок иерархического положения елемента на странице. Его официальный сайт http://emmet.io/ и шпаргалка http://docs.emmet.io/cheat-sheet/ Еще одно условие: для работы этого дополнения нужен предустановленный nodeJS. Найти его можно тут: https://nodejs.org/ Думаю, что nodeJS у вас уже был предустановлен, а если не был, то он вам точно еще пригодится не раз. 2. SublimeCodeIntel - https://packagecontrol.io/packages/SublimeCodeIntel Плагин портирован из текстового редактора Komodo Editor, помогает автодополнением к языкам программирования JavaScript, Python, Ruby, XML, HTML, CSS, PHP и другим. 3. SideBarEnchancements - https://packagecontrol.io/packages/SideBarEnhancements Плагин открывает новые возможности боковой панели для работы с Вашими проектами. 4. BracketHighlighter - https://packagecontrol.io/packages/BracketHighlighter Плагин позволяет отображать дополнительные скобки возле номеров строк, отображая, к примеру, блоки кода. 5. AutoFileName - https://packagecontrol.io/packages/AutoFileName Плагин говорит сам за себя, когда мы пишем пути к нашим фалам, помогает, выводя дополнительное выскакивающее окошко, с выбором папок или файлов. 6. HTML-CSS-JS Prettify https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify Плагин “расческа”. Причесывает наш код, делает его более читабельным для человеческого глаза. 7. Color Highlighter - https://packagecontrol.io/packages/Color%20Highlighter Плагин подсвечивает цвета при написании вайлов CSS/Less/SASS/SCSS/Stylus. Остальные плагины, для работы с такими библиотеками как jQuery, Bootstrap, AngularJS,  советую устанавливать осторожно, потому как постоянно выскакивающие окошки с помощью какого либо плагина если не пугают, то начинают очень надоедать. Поэтому советую не превращать текстовый редактор в “неубранный балкон”. Также есть возможность установки из того-же Package Control множества тем и цветовых схем. Темы и цветовые схемы отличаются тем, что тема  меняет полностью весь внешний вид Sublime, цветовая схема  меняет только цвета подсветки синтаксиcа. Файл настроек находится во вкладке Preferences>Settings Default/Settings User. Почему именно два файла? Потому что вы сможете изменять только Settings User. Оба файла являются, по сути, JSON объектами, поэтому разобраться и изменять свои настройки вы научитесь довольно быстро. Brackets сайт - http://brackets.io/ Этот текстовый редактор также поддерживает большинство перечисленых плагинов, и даже если таковых вы не найдете, то их аналоги точно есть в песочнице. На правой боковой панели вы найдете несколько кнопок: Первая в виде молнии – LivePreview. Запускает страницу с рашрирением html в вашем браузере, который установлен по умолчанию, браузер будет сам обновлять страницу.  Вторая в виде лего – Extension Manager. При клике вызывает модальное окно в, котором содержатся вкладки меню для выбора плагинов, тем, их установке и удалению.  Третья в виде “слоев торта” со стрелочкой вверх – Extract for Brackets. Ради этой кнопки и стоит устанавливать этот редактор. Она позволяет после регистрации загрузить файлы psd формата для верстки прямо  из текстового редактора, не загружая ничего больше.  Кликаете по кнопке Open PSD Регистрируетесь или же входите под своим Adobe ID, загружаете PSD шаблон и начинаете верстать в разы быстрее. Кликнув по какому либо элементу на шаблоне, вы можете моментально перенести: текст, css свойства, или же выгрузить картинку из шаблона пряму в папку с проектом. С такими возможностями верстка становится в разы быстрее! Не агитирую, просто  советую попробовать) Visual Studio Code сайт - https://code.visualstudio.com/ Бесплатный кроссплатформенный текстовый редактор, основанный на технологиях замечательного текстового редактора Atom от GitHub. Подробное описание можно прочитать по ссылке ниже: https://uk.wikipedia.org/wiki/Visual_Studio_Code Также будет полезна ссылка с документацией: https://code.visualstudio.com/Docs/setup Отличный текстовый редактор от компании Microsoft. Облегченная и кроссплатформенная версия Visual Studio. Имеет схожий дизайн со своим старшим собратом. Похожие темы и подсказки в виде выпадающих окошек (контекстные подсказки). Так что разработчикам, перешедшим с Visual Studio, будет гораздо легче адаптироваться. Еще несколько плюсов с коробки: поддержка таких языков програмирования: JavaScript, C++, C#, PHP, XML, Java, Objective-C, HTML, CSS, Less, Sass и т.д. (полный перечень находится в документации). отладчик инструменты для работы с Git автодополнения в стиле Emmet. Настоятельно рекомендую обратить внимание и попробовать Visual Studio Code. Даже просто потому, что вы установите его и все, дальше просто приступаете к работе :) На этом все. Думаю, что изложил свои мысли достаточно простым языком. Помните, что не важно, в каком текстовом редакторе или IDE вы работаете, это всего лишь инструмент, в конечном итоге вы можете остановить свой выбор на обычном блокноте и там разрабатывать приложения, для того, чтобы писать программы не обязательно иметь подсветку синтаксиса, всякие плюшки, главное, чтобы вам было удобно и при написании вы чувствовали себя комфортно. Выбор за вами. Удачи!

Введение Эта статья предназначена для начинающего разработчика, который впервые столкнулся с изучением AngularJS и сопутствующими технологиями, такими как GIT, node.js, Grunt, Bower. Вы могли много читать литературы по поводу перечисленных выше технологий, в этой статье мы лишь вкратце опишем, чем по сути является каждая из них, и как с ней работать. 1. Проходим по ссылке: https://docs.angularjs.org/tutorial и следуем всем инструкциям по установке. Не бойтесь, мы Вам в этом поможем! И постараемся вместе разобраться в основных понятиях современного Frontend Development'a :) Для начала нам следует установить git на свою ЭВМ :)       Коротко о git. Git — система для контроля версий файлов. Более обширное определение - это  ресурс, который позволяет разработчику или команде разработчиков контролировать версии своих приложений. Подробнее тут: https://ru.wikipedia.org/wiki/Git  Идем по ссылке в новой вкладке: http://git-scm.com/ и выбираем ту версию git, которая нас интересует, в соответствии с нашей операционной системой. Скачиваем файл для установки, с расширением .exe и устанавливаем в папку Program files. 2. Идем по ссылке в новой вкладке браузера https://github.com/ и регистрируемся. Github – самый крупный веб-сервер для хостинга (размещения) проектов разработчиков. Итак, мы это все сделали, далее скачиваем приложение из репозитория angular-phonecat, размещенного на Github. То есть, нашей задачей теперь будет взять и скачать готовое приложение себе на жесткий диск. 3. AngularJS – это JavaScript фреймфорк, который заточен под разработку одностраничных приложений. Официальный сайт AngularJS https://angularjs.org/ Основной идеей AngularJS является убеждение создателей оного, что декларативное программирование (парадигма программирования - описание программы, какая она по сути, а не то, как ее создать) находит применение в разработке внешнего вида приложения, а императивное программирование (парадигма программирования – в отличие от декларативного программирования, описывает процесс вычисления в виде инструкций, по сути, пошагово изменяет инструкции программы, похоже на приказы) используется для описания бизнес логики. AngularJS – расширяет HTML, чтобы создать двустороннюю привязку данных для динамического контента. Цели AngularJS: DOM-манипуляции не зависят от логики приложения. Параллельная разработка путем разделения клиентской части и серверной части приложения. Планирование разработчиком всех приложений – интерфейс, бизнес-логика, тестирование. Открываем терминал/консоль и перемещаемся в ту папку, в которую хотим сохранить проект с помощью команды cd Documents/ (эта команда означает - cd – change derictory на Documents) и нажимаем Enter  мы переместились в папку, где хранятся документы (просто потому, что мне так удобней, можно этого не делать и остаться в корне диска). Копируем следующую строку  git clone --depth=14 https://github.com/angular/angular-phonecat.git вставляем в терминал/консоль и нажимаем Enter. Эта строка создает папку angular-phonecat и копирует приложение с Git с последними 14 коммитами (изменениями). Ждем окончания копирования проекта. Далее переходим в директорию с нашим приложением командой     cd Documents/angular-phonecat  или cd angular-phonecat/   после жмем Enter и оказываемся в папке с приложением 4. У нас на жестком диске есть наше приложение, теперь нам следует установить node.js. Node.js – что такое node.js? Есть много статей, определений и объяснений. В общем и коротко: Node.js – это интерпретатор JavaScript. Приложение node.js получает js код и выполняет его. Нам надо установить node.js в папку с нашим приложением. Переходим по ссылке: http://nodejs.org/download/ качаем приложение и устанавливаем. 5. Вместе с node.js устанавливается и npm. Что такое npm? Npm – это node package manager. Npm устанавливает пакеты, которые прописаны в файле package.json перед установкой npm нам следует проверить, какая версия node.js установлена у нас. Это мы делаем командой в терминале: node –-version есть :) Теперь в терминале набираем следующее: npm install На выходе получаем такую структуру нашего проекта: Файл  package.json содержит в себе информацию о приложении, название, версию, установленные пакеты в приложении. Возможна установка пакетов как через файл package.json, так и через терминал. 6. Это не обязательно, но в будущем этот пакет Вам пригодится. Grunt – это Task Runner – автоматизатор процессов, позволяет проводить минификацию кода, сборку кода(компиляцию), тестирование. В терминале вводим следующее: npm install -g grunt-cli (-d   - говорит о том, что мы устанавливаем grunt глобально.) Дополнительно устанавливаем в директорию с приложением npm install grunt-cli теперь обновляем npm:  sudo npm update npm -g sudo - (substitute user and do – подменить пользователя и выполнить) – в Unix системах позволяет пользователям выполнять команды от имени суперпользователя root. В директории с приложением требуется создать файл Gruntfile.js, вложим в него код из официального примера http://gruntjs.com/sample-gruntfile в конце страницы - конечная версия файла, копируем код себе в файл. Или копируем отсюда: module.exports = function (grunt) {     grunt.initConfig({         pkg: grunt.file.readJSON('package.json'),         concat: {             options: {                 separator: ';'             },             dist: {                 src: ['src/**/*.js'],                 dest: 'dist/<%= pkg.name %>.js'             }         },         uglify: {             options: {                 banner: '/! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> /\n'             },             dist: {                 files: {                     'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']                 }             }         },         qunit: {             files: ['test/**/*.html']         },         jshint: {             files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],             options: {                 // options here to override JSHint defaults                 globals: {                     jQuery: true,                     console: true,                     module: true,                     document: true                 }             }         },         watch: {             files: ['<%= jshint.files %>'],             tasks: ['jshint', 'qunit']         }     });     grunt.loadNpmTasks('grunt-contrib-uglify');     grunt.loadNpmTasks('grunt-contrib-jshint');     grunt.loadNpmTasks('grunt-contrib-qunit');     grunt.loadNpmTasks('grunt-contrib-watch');     grunt.loadNpmTasks('grunt-contrib-concat');     grunt.registerTask('test', ['jshint', 'qunit']);     grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); }; Пакеты, которые мы прописали в Gruntfile.js, следует установить через npm следующими командами: npm install grunt-contrib-uglify --save-dev npm install grunt-contrib-qunit --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-jshint --save-dev Подробнее об установленных пакетах можно прочитать тут: https://github.com/gruntjs/grunt-contrib-uglify https://github.com/gruntjs/grunt-contrib-qunit https://github.com/gruntjs/grunt-contrib-concat https://github.com/gruntjs/grunt-contrib-jshint https://github.com/gruntjs/grunt-contrib-watch 7. Установка Bower и что это такое. Bower – менеджер пакетов для клиентской стороны приложения JS. Отличием Bower от Npm есть то, что Bower, если возникнет конфликт, не позволит Вам поставить несовместимый пакет(библиотеку), которая уже установлена, Bower ставит одну версию пакета. В терминале ставим глобально bower и пишем: npm install -g bower  и конечно ставим в директорию с проектом  bower install 8. Сongrats !!! Теперь у нас установлено приложение и мы можем запускать его, из файловой системы заходим в папку с приложением, потом в папку – app, находим файл и тапаем (двойной клик) по нему index.html или (что будет правильным) нужно зайти в терминал и ввести: npm start (запускаем сервер) и в браузере в омнибоксе (адресной строке) ввести: http://localhost:8000/app/index.html Wuala – наше приложение запускается и работает. Подробнее об AngularJS и как с ним работать вы можете узнать из курса AngularJS в учебном центре CyberBionic Systematics. Всем спасибо и удачного кода. 

Создания простого чата Для начала создадим простой чат с помощью HTML&CSS и PHP&MySQL Проектирование Базы Данных Переходим к phpMyAdmin. Создаем новую базу данных, называем “chatdb”. Создаем новую таблицу, называя “Posts”, включая в себя 4 столбца: “id” тип колонки INT, автоматическое увеличение на 1 (задаем A_I в ячейку с флажком) основной ключ (index); “nick” тип колонки VARCHAR и длина 100; “post_text” тип колонки TEXT; “post_dt” тип колонки DATETIME по умолчанию является CURRENT_TIMESTAMP. Создание веб-сайта. Во-первых, создадим главную страницу. Список комментариев и отправка формы, используя кнопку. Всё будет находится в файле “index.php” .  Давайте создадим этот файл и напишем что-то вроде этого:  <html> <head> head> <body> php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> php if ($result) {   while ($post = $result->fetch_object()){     $nick = $post->nick;     $post_dt = $post->post_dt;     $post_text = $post->post_text;         echo "<b>$nickb> ($post_dt):<br>";     echo "$post_text<br>";     echo "<br>";   }   $result->close(); } ?> div> php $mysqli->close(); ?> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     divComments.scrollTop = divComments.scrollHeight; script> body> html> 2. Дальше давайте создадим “post.php” файл и напишем такое:  php $nick = $_POST['nick']; $post_text = $_POST['text']; $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); $nick = $mysqli->real_escape_string($nick); $nick = htmlspecialchars($nick); $post_text = $mysqli->real_escape_string($post_text); $post_text = htmlspecialchars($post_text); $mysqli->query("INSERT INTO posts (nick, post_text) VALUES ('$nick', '$post_text');"); $mysqli->close(); /* Redirect To Main Page */ header('Location: ' . $_SERVER['HTTP_REFERER']); ?> 3. Откроем ваш чат в любом продвинутом браузере. Вся работа:  4. Напишите ник и текст, а потом нажмите на кнопку отправки.  Когда отправили форму, сразу же происходит перенаправление формы главной страницы в “post.php”. “Post.php” моментально наполняет данными таблицу и перенаправляет на главную страницу. Также “post.php” содержит начальный XSS и SQL защищенный вход. Для упрощения не отправляем клиентам время с JS на “post_dt” на внесения данных, а указываем значение по умолчанию – CURRENT_TIMESTAMP, который предоставляет нынешнюю дату и время на сервер. Когда количество комментариев больше, чем экран может вместить, то комментарии   переполнены в div, используется вертикальный скроллбар. Во время загрузки страницы JS автоматически опускает скроллбар вниз к недавнему комментарию. Что тут не так? Проблема номер 1. Новый непрочитанный комментарий от пользователя не загружается в базу данных автоматически, без ручной перезагрузки страницы. Это очень, очень серьезная проблема для любого чата. Как это исправить? Очевидно, один из путей сделать это - использовать HTTP-запрос к фоновой работе автоматически (с помощью JS) и асинхронно, то есть это один из способов обеспечить выполнение AJAX в любой form. Проблема номер 2. Также неправильно то, что кнопка отправки перезагружает страницу (перенаправляет на вторую страницу и следующим шагом возвращает назад). При перезагрузке страницы сбрасывает “Nick” в  поле (также, как любые другие изменения, те, что сделали с пользователем) Как это исправить? Конечно, можно обеспечить выполнение обхода для сохранения изменений и перезагрузки на перезагружаемой странице. Но не эффективнее ли устранить причину, чем последствие? Можно только убрать перезагружаемую страницу и эта проблема будет решена автоматически. Проблема номер 2.1. Видите ли что-то необычное тут? Это слишком быстро? Дело с чатом очень простое – загружаем только два маленьких текстовых параметра. Что делать, если нужно улучшить чат с помощью добавления присоединения, а конкретно - изображений и видео? Видео может иметь объем в размере нескольких мегабайт, что тогда в этом случае? Давайте попробуем.  Давайте немного изменим “post.php”, после $mysql->query() добавив это:  for ($i = 0; $i < 1000000000; $i++) { } Старайтесь размещать какие-либо комментарии. Что мы видим? Нет, UI не остановилось (заморозилось), но браузер ждет до того, как закончится подключение:   Да, если “post.php” вызывает какую-то необработанную ошибку, то чат исчезает, и пользователь видит пустое окно с сообщением о непонятной ошибке. Чтобы вернуться к чату, пользователю стоит нажать кнопку “Back” в браузере. И это проблема номер 2.2. Давайте уберем петлю с “post.php” и исправим эти проблемы. Реализация легкого AJAX в простой чат Автоматическое обновление комментариев Эта веб-страница без AJAX? Это веб-страница, которая полностью перезагружается. Эта веб-страница c AJAX? Это веб-страница, что перезагружается частично. Где же взять части этих страниц? Стоит разделить нашу страницу на части, в этом случае сервер генерирует страницу частично. Страница будет состоять из двух частей – блок комментариев и другой контент страницы. Комментарии будут загружаться и перезагружаться отдельно от другой страницы. Давайте сделаем первую часть, то есть блок комментариев. Для начала создадим пустой файл, назовем “getcomment.php”. Дальше переходим в “index.php” для того, чтобы вырезать комментарии и далее отделить его. 1. Вырезаем инициализированный блок MySQL с “index.php"  php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> вставляем в “getcomments.php”. 2. Следующее, вырежем контент div c комментариями с “index.php”: php if ($result) {   while ($post = $result->fetch_object()){     $nick = $post->nick;     $post_dt = $post->post_dt;     $post_text = $post->post_text;         echo "<b>$nickb> ($post_dt):<br>";     echo "$post_text<br>";     echo "<br>";   }   $result->close(); } ?> И вставим (добавим) в “getcomments.php” после инициализации MySQL. 3. Дальше, вырежем недалекий блок MySQL с “index.php”: php $mysqli->close(); ?> Вставим его в конец файла “getcomments.php”. 4. Наконец-то, убираем JS-скрипт, который опускает скролл в самый низ. <script type="text/javascript"> var comments = document.getElementById('comments'); comments.scrollTop = comments.scrollHeight; script> Не переживай, это только временно. 5. Сделано. Теперь имеем что-то наподобие этого:  <html> <head> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> body> html> getcomments.php:  php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> Вероятно, теперь наша страница разделена. Давайте проверим её. Переходим http (точнее ССЫЛКА для локального сервера). Дальше, переходим на главную страницу, http:///index.php Это удивительно! Всё удачно получилось, разделив страницу на части за пару минут! Не останавливаемся на этом. Теперь “glue” эти части с помощью AJAX. Как это сделать? 1. Для начала стоит создать пустой JS-скрипт на главной странице: <script type="text/javascript"> alert('Test'); script> Добавив это после тега div, перед закрывающимся тегом . 2. Сделаем HTTP GET запрос от JS к “getcommet.php” Для этого используем XMLHtttpRequest (XHR) класс: <script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.open('GET', '/getcomments.php', false); xhr.send(null); if (xhr.status == 200) {   alert(xhr.responseText); } script> Это работает, но не читает старые версии IE те, что не поддерживают такую инициализацию. Для получения более кросс-браузерного пути переходим в и добавляем это: <script type="text/javascript"> function getXmlHttp(){   var xmlhttp;   try {     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");   } catch (e) {     try {       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");     } catch (E) {       xmlhttp = false;     }   }   if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {     xmlhttp = new XMLHttpRequest();   }   return xmlhttp; }; script> И главный скрипт (в конце) <script type="text/javascript"> var xhr = getXmlHttp(); xhr.open('GET', '/getcomments.php', false); xhr.send(null); if (xhr.status == 200) {   alert(xhr.responseText); } script> Как видно, теперь JS получает контент со страницы “getcomments.php” и показывает это в предупреждении.   2.1. Вопрос: «Это на самом деле AJAX (Asynchronous Javascript And Xml)?» Это AJAX, потому что запрос сервера отформатирован в HTML (который основан на XML). Но действительно ли это AJAX, это асинхронно? Проверим. Добавим эти уже знакомые строки в любое место между в “getcomments.php”: for ($i = 0; $i < 1000000000; $i++) { } Что теперь видно на загружаемой странице? Вначале страница зависает, его замораживает UI (становится не реагирующим на нажатие левой/правой кнопки мыши): Дальше Chrome показывает навязчивое всплывающие окно, сообщающее об удалении страницы: Это не AJAX! Это JAX! Как его сделать асинхронным? К счастью, ХHR также поддерживает асинхронный режим: <script type="text/javascript"> var xhr = getXmlHttp(); xhr.open('GET', '/getcomments.php', true); /* true for asynchronous */ xhr.onreadystatechange = function() {   if (xhr.readyState == 4) {     if(xhr.status == 200) {       alert(xhr.responseText);     }   } }; xhr.send(null); script> В этом случае браузер не ждет ответа с главного потока пользовательского интерфейса, он запускает в другом (асинхронно) и вызываемым событием “onreadystatechange” в главном контексте UI.  Теперь всё в порядке, страница полностью доступна, пока запрос запущен, и после ответа получит предупреждение. for ($i = 0; $i < 1000000000; $i++) { } И продолжаем работу. 3. Добавляем этот контент в div  вместо предупреждения. Заменить это: alert(xhr.responseText);  C этим: var divComments = document.getElementById('comments'); divComments.innerHTML = xhr.responseText; Возвращаем назад, клиент видит “glued” страницу с блоком комментариев. 4. Дальше следует установить интервал для автоматической проверки новых комментариев время от времени… и также восстановить удаленный сценарий автоматической прокрутки.  <html> <head> <script type="text/javascript">     function getXmlHttp() {         var xmlhttp;         try {             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e) {             try {                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");             } catch (E) {                 xmlhttp = false;             }         }         if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {             xmlhttp = new XMLHttpRequest();         }         return xmlhttp;     }; script> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     function loadComments() {         var xhr = getXmlHttp();         xhr.open('GET', '/getcomments.php', true);         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     if (xhr.responseText !== divComments.innerHTML) {                         divComments.innerHTML = xhr.responseText;                         divComments.scrollTop = divComments.scrollHeight;                     }                 }             }         };         xhr.send(null);     };     loadComments();     setInterval(loadComments, 1000) script> body> html> Теперь проблема исправить это. Новые комментарии с другого пользовательского чата (другие вкладки браузеров, окон и экземпляров) получают каждые 1000 миллисекунды (1 секунду) автоматически. Но отправка комментариев уже вызывает перезагрузку нашей страницы. Отправка комментариев без перезагрузки Как написано выше, XHR помогает отправлять HTTP GET-запросы без перезагрузки страницы и GUI заморозки (асинхронно). Теперь отправляем HTTP-запрос асинхронно, но на этот раз POST запрос, а не GET. И, естественно, XHR позволяет это. Используем метод send(). Для GET указываем null. Для POST устанавливаем запрос “body”.Также нужно добавить “Content-Type:application/x-www-from-urlencoded” в header  для того, чтобы разрешить серверу знать, какой формат использовать для отправки данных. Заметка: если не знаете, что отправлять, то можно захватить регулярный запрос с помощью “Fiddler” или же любой другой HTTP-перехватчик и только просимулировать запрос. HTTP-перехватчик — это незаменимый инструмент для работы с HTTP/HTTPS. Это позволяет увидеть все headers и bodies по всем HTTP(S)-запросам, что отправляются в систему. Лучше использовать “Fiddler”, это бесплатное, современное и очень простое приложение, что может поддерживать HTTP/HTTPS и оба Win x86/x64. 1. Для начала создадим пустой JS скрипт в HTML. Разместить до самого тега, потому что этот скрипт будет использован для отправки формы комментария (форма будет вызывать этот скрипт при отправке).2. В этом скрипте, реализуем функцию, что будет отправлять ник и комментарии в “post.php”  <script type="text/javascript"> function postComment(nick, text) {   var xhr = getXmlHttp();   xhr.open('POST', '/post.php', true);   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');   xhr.onreadystatechange = function() {     if (xhr.readyState == 4) {       if (xhr.status == 200) {         /* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */       }     }   };   xhr.send('nick=' + nick + '&text=' + text); /* joining the data in format simulates form */ }; script> 3. Следующие, перезагружая страницу при отправке:  ... onsubmit="return false;"> Также добавим вызов “postComment’s”: action="post.php" method="post" style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;"> 4. Наконец, необязательно, но можно убрать “action” и “method” с формы:  <form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;"> 5. Результат: <html> <head> <script type="text/javascript">     function getXmlHttp() {         var xmlhttp;         try {             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e) {             try {                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");             } catch (E) {                 xmlhttp = false;             }         }         if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {             xmlhttp = new XMLHttpRequest();         }         return xmlhttp;     }; script> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <script type="text/javascript">     function postComment(nick, text) {         var xhr = getXmlHttp();         xhr.open('POST', '/post.php', true);         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     /* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */                 }             }         };         xhr.send('nick=' + nick + '&text=' + text);     }; script> <form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     function loadComments() {         var xhr = getXmlHttp();         xhr.open('GET', '/getcomments.php', true);         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     if (xhr.responseText !== divComments.innerHTML) {                         divComments.innerHTML = xhr.responseText;                         divComments.scrollTop = divComments.scrollHeight;                     }                 }             }         };         xhr.send(null);     };     loadComments();     setInterval(loadComments, 1000) script> body> html>  Теперь простая реализация AJAX подошла к концу. Это ещё не конец, это только начало. Есть ещё достаточно всего для изучения и улучшения.

Що таке патерн (шаблон) проєктування. Коли використовують шаблони. Якими бувають патерни проєктування. Породжуючі. Структурні. Патерни поведінки. Як обрати шаблон? Висновки. Програмісти-початківці завжди приходять до точки, коли їхній код перетворюється на “спагеті”. Його важко читати, він містить масу самоповторень, зайвих функцій, а додавання нового функціоналу перетворюється на десяте коло пекла. Один із найкращих засобів запобігання цьому – використовувати патерни проєктування (Design Patterns). Чи є це срібною кулею, які переваги та недоліки патернів існують, і які з них необхідно знати розробникам? Відповіді розбираємо нижче. Що таке патерн (шаблон) проєктування? Патерни – це типові архітектурні рішення проблем, котрі часто зустрічаються під час розроблення ПЗ. Їхня інша назва – шаблони, і що цікаво – людство дуже часто оточує себе шаблонами у повсякденному житті: однакові гнізда розетки та форми вилок у приміщеннях – універсальне рішення для електроживлення; виделки та ложки – інструменти споживання майже будь-якої їжі; чашки – ємності для розміщення будь-якої рідини і так далі. Людина завжди прагне спростити традиційну діяльність, і це не могло обійти стороною програмування. Ідеї створення універсальних правил для якісної розробки існували ще до 90-х років минулого століття, але дійсно проривною стала праця "Design Patterns: Elements of Reusable Object-Oriented Software" (1994) авторства Еріха Ґамма, Річарда Гелма, Ральфа Джонсона та Джона Вліссідеса, які іменують себе як "Банда чотирьох" (Gang of Four, GoF). У книзі описано 23 патерна та їхнє застосування в об'єктно-орієнтованому дизайні. Ця праця стала фундаментальною і тепер патерни gof складають кістяк багатьох обговорень якісного коду. Коли використовують патерни В розробці шаблони використовують при необхідності приведення коду до наступних критеріїв: Читабельність – інші розробники мають без складнощів розуміти написане. Масштабованість – легкість у створенні нового функціоналу. Підтримуваність – оновлення кодової бази має проходити якомога плавніше. Також вони здатні підвищити швидкість і продуктивність розробника – патерни це дійсно дозволяють. Вони гарно справляються і з наступними задачами: зменшення кількості потенційних помилок та вузьких місць; спрощення рефакторингу; зменшення технічного боргу; покращення комунікації девелоперів з іншими програмістами, проєктними менеджерами, власниками тощо. Необхідність використати шаблони проектування зростає разом зі збільшенням кодової бази, особливо при комерційному розробленні – коли створюване ПЗ має приносити прибуток. Важливо пам’ятати, що використання патернів інколи є геть недоречним. Подекуди воно може значно ускладнити читабельність, громіздкість і масштабованість коду. Наприклад, нескладний функціонал, який нечасто використовується і займає мало місця в коді, не потребує pattern-втручання. А от репетативний код, що вирішує класичні задачі (сортування, перебір даних тощо) – ідеальний претендент на застосування шаблону. Аби не помилитися спершу з’ясуйте контекст вашої проблеми, а вже потім обирайте патерни програмування, які найкраще задовольняють вимогам. Якими бувають патерни проєктування У своїй книзі GoF виділяють три великі сімейства: Сімейство Короткий опис Породжуючі патерни або Creational Patterns Надають найкращі способи створення об'єктів. Вони абстрагуються від процесу конкретизації і роблять вашу систему незалежною від створення, компонування та представлення її об'єктів. Популярні приклади: “Абстрактна фабрика” (Abstract Factory), “Одинак” / “Одиночка” (Singleton), “Прототип” (Prototype), “Фабричний метод” (Factory Method). Структурні патерни або Structural Patterns Фокусуються на композиції об’єкту. Допомагають переконатися в тому, що зміна частини системи не потягне за собою необхідність змін в інших її складових. Популярні приклади: “Проксі” (Proxy), “Адаптер” (Adapter), “Компонувальник” (Composite), “Фасад” (Facade). Патерни поведінки або Behavioral Patterns Зона відповідальності – алгоритми та обмін інформацією між об’єктами. Популярні приклади: “Відвідувач” (Visitor), “Ітератор” (Iterator), “Ланцюжок обов’язків” (Chain of Responsibility), “Стратегія” (Strategy). Розглянемо більш детально деякі з них. Породжуючі Породжуючі патерни – це надійні помічники у створенні об’єктів таким чином, аби в майбутньому з ними було максимально легко працювати. Дамо короткий опис деяких шаблонів: Патерн Одинак / Сінглтон забезпечує наявність лише одного екземпляру класу з глобальною точкою доступу. Singleton поширений в задачах конфігурацій або логування в застосунках, де потрібен єдиний контрольований доступ. Шаблон Прототип дозволяє створювати нові об'єкти шляхом копіювання існуючих екземплярів. Використовується Prototype в ситуаціях, коли створення об'єкта надто дороге, наприклад, при клонуванні складних або ресурсоємних об'єктів. Фабричний метод визначає інтерфейс для створення об'єктів, але дозволяє підкласам самостійно визначати тип створюваних об'єктів. Fabric Method корисний у багатофункціональних застосунках, де класи повинні мати можливість вибирати тип об'єктів, наприклад, при роботі з різними форматами документів, системами онлайн платежів тощо. Абстрактна фабрика визначає інтерфейс для створення сімейств пов'язаних об'єктів без вказівки їх конкретних класів. Використовують Abstract Factory для створення різних компонентів інтерфейсу користувача, які повинні працювати разом і забезпечувати єдиний стиль (світла / темна тема вебсайту тощо). Розглянемо приклад на патерні Singleton. Уявіть собі просту програму – музичний плеєр. Він дозволяє користувачам відтворювати музичні файли. Однак водночас має працювати лише один екземпляр плеєра – можливість відкриття декількох одночасно повинна бути недоступна. Цього можна досягти за допомогою шаблону Singleton. Простий приклад коду мовою C#: public class MusicPlayer {             private static MusicPlayer _instance;             private MusicPlayer()             {              // Ініціалізуємо музичний плеєр (наприклад, завантажуємо плейлисти)             }             public static MusicPlayer Instance             {             get             {             if (_instance == null)             {                        _instance = new MusicPlayer();             }             return _instance;             }             }             public void PlaySong(string songPath)             {             // Запустити пісню             }             public void PauseSong()             {             // Поставити на паузу             }             public void StopSong()             {             // Зупинити відтворення пісні             } } // Отримуємо екземпляр MusicPlayer MusicPlayer player = MusicPlayer.Instance; // Використовуємо функціонал MusicPlayer player.PlaySong("C:\\Users\\yourUsername\\Music\\mySong.mp3"); player.PauseSong(); player.StopSong(); Щоразу як в різних ділянках проєкту вам треба буде створювати екземпляр плеєру для відповідної взаємодії, ви завжди працюватимете лише з одним і тим самим екземпляром, уникаючи дублікації. Якщо ви програмуєте мовою сі шарп, детально розібрати популярні патерни проєктування C# з прикладами ви можете за посиланням. Структурні З короткого опису в таблиці легко дійти висновку, що структурні патерни дозволяють сформувати надійну, масштабовану та підтримувану архітектуру проєкту. Коротке знайомство: Проксі забезпечує об'єкт-посередник для контролю доступу до іншого об'єкта. Зазвичай шаблон Proxy використовують для реалізації “лінивого” завантаження, коли об'єкт створюється або ініціалізується лише при зверненні до нього (наприклад, завантаження картинок з високою роздільною здатністю). Адаптер дозволяє об'єктам з несумісними інтерфейсами працювати разом. Застосовується патерн Adapter для інтеграції нових компонентів в існуючу систему без зміни її коду. Підходить для використання нової бібліотеки у старому застосунку. Компонувальник використовується для ієрархічного компонування об'єктів для подальшої роботи з ними як з єдиним об'єктом. Використовується для створення деревоподібних структур, як-от файлові системи або GUI, де кожен вузол може бути як простим, так і Composite об'єктом. Фасад (Facade) надає спрощений інтерфейс для взаємодії зі складною системою або набором класів. Він зменшує складність роботи з підсистемами і надає користувачам єдиний вхідний інтерфейс для виконання рутинних операцій. Вивчити саме структурні патерни проєктування C# (з прикладами) ви можете за посиланням. Поведінкові Патерни поведінки в першу чергу визначають зв’язки між об’єктами і те, як вони здійснюють обмін інформацією. Наприклад: Патерн Відвідувач (Visitor) дозволяє додавати нові операції до об'єктів без зміни їхніх оригінальних класів. Використовується для взаємодії з об’єктами зі складною структурою, коли внесення додаткової логіки в оригінальні класи невиправдано ускладнює код. Ітератор / Iterator надає зручний механізм послідовного та простого доступу до елементів колекції, незважаючи на складність її побудови. Даний патерн поведінки популярний при обході елементів контейнерів, як-от списки або масиви – він надає універсальний інтерфейс для різних типів колекцій. Ланцюжок обов’язків або ж патерн Chain of Responsibility дозволяє передавати запит ланцюжком обробників, поки один з них не обробить запит. Незамінний при обробці запитів на сервері, де кожен обробник може передати запит наступному обробнику в ланцюжку: перевірка при авторизації на сайті, оброблення подій у GUI тощо. Для входу в патерни проєктування книга від Gang of Four буде гарною точкою відліку. Ви познайомитеся з класикою та академічним розкриттям теми, використовуючи патерни gof. Якщо ж ви хочете збагатити свої знання шаблонів, але віддаєте перевагу мові Java, рекомендуємо відео курс “Патерни проектування Java”. Як обрати патерн? Спочатку ви маєте проаналізувати задачу – для більшої зрозумілості виконайте її декомпозицію, розбивши на декілька складових. При цьому використовуйте системний підхід: прорахуйте, як ваше рішення вплине на весь проєкт, які елементи воно зачепить зараз, і який вплив воно матиме на додавання нового коду. Якщо ви вже працюєте в ІТ-компанії, ваші колеги, тімлід або архітектор можуть підказати вам доцільність використання того чи іншого патерну, розкрити нюанси вже існуючої архітектури, кодового стилю та багато іншого. Лише після ретельного аналізу можна переходити до підбору шаблону, зважаючи на усі переваги та недоліки. До речі, в цих задачах гарними помічниками будуть безкоштовні AI-асистенти на кшталт ChatGPT, Gemini та ін. Також не забувайте про використання інших методик покращення кодової читабельності, масштабування й чистоти: SOLID принципи – вони регламентують 5 основних засад створення структурованого, якісного коду. Нещодавно ми проводили вебінар, на якому розбирали кожен принцип в деталях, запрошуємо до перегляду! А якщо вас цікавить прикладний характер SOLID принципів на Java, можете пройти даний відео курс. GRASP (General Responsibility Assignment Software Patterns) – патерни для об’єктно-орієнтованого проєктування. Вони не мають вираженої структури і носять більш абстрактний характер, аніж патерни gof. DRY (Don’t Repeat Yourself) – головна ідея даного принципу полягає у створенні коду, який не матиме дублікацій в проєкті. KISS (Keep It Simple, Stupid) – регламентує написання якомога простішого коду, аби його можна було легко читати і розуміти. Рефакторинг – повернення до вже написаного коду з метою його покращення без зміни функціональності. Інші техніки, що залежать від проєктів. Висновки Патерни грають ключову роль в сучасному розробленні. Вони акумулюють в собі найкращі практики створення кодової бази таким чином, аби досягнути максимальної легкості та ефективності розроблення, особливо на великих проєктах. Звісно, не завжди їхнє використання є доречним – потрібно аналізувати задачі і продумувати наслідки застосування того чи іншого шаблону, аби не отримати величезну валізу без ручки. Розвивайте вашу експертизу в області патернів – це win-win стратегія. З одного боку перед працедавцями ви постанете як досвідчений та висококваліфікований спеціаліст, а з іншого – ваші програмні рішення матимуть елегантний характер і відзначатимуться легкістю в читанні, підтримці та масштабуванні. Чи використовуєте ви патерни в своїй розробницькій діяльності? Можливо, тільки вивчаєте? Залишайте в коментарях ваші відповіді!

Здравствуйте! Друзья, в этот раз мы подготовили для вас подборку лучших вебинаров от ITVDN по направлению .NET. В рейтинг вошли как познавательные вебинары с актуальной информацией, так и вебинары, ориентированные на прокачку ваших навыков создания кода. Давайте приступим к их рассмотрению. Как стать C# разработчиком в 2021 году? .NET или .NET Core? Автор — Дмитрий Охрименко, сертифицированный специалист Microsoft (MCTS, MCPD, MCT). Тренер-консультант, эксперт по построению распределенных и веб-ориентированных приложений. Автор курсов по .NET и FrontEnd разработке на ITVDN C#/.NET разработка — это очень перспективное направление в IT, жизнь которому дала всемирно известная компания MIcrosoft. Если вам интересна данная сфера и вы хотите сделать в ней профессиональный старт, этот вебинар будет для вас как нельзя кстати! Цель вебинара — помочь вам разобраться с главными аспектами данной специальности, опираясь на тенденции развития IT рынка, правильно расставить приоритеты и помочь спланировать ваше обучение и карьеру по направлению C# / .NET.  На мероприятии рассмотрены следующие важные вопросы: Есть ли смысл начинать учить C# в 2021 году? Что такое .NET Framework и что такое .NET Core? Что учить и в какой последовательности? Карта специальности Сравнение веб приложения на .NET и на .NET Core Полезные ресурсы для обучения и развития Вопросы и ответы Как стать Full-Stack разработчиком? Автор — Виталий Емец, FullStack Developer, Microsoft Certified Specialist Full-stack разработчик (произносится “фулл стек”) — это мастер на все руки в мире веб-разработки. Ему под силу реализовать как клиентскую, так и серверную сторону приложения, которыми обычно занимаются FrontEnd и BackEnd разработчики раздельно друг от друга. Таким образом, в некоторых случаях Full-Stack специалист может даже в одиночку вести проект от начала до конца. Какими навыками необходимо обладать, чтобы достичь такого уровня мастерства, и какой инструментарий должен быть у истинного Full-Stack разработчика? В чем преимущества данной профессии и какие у нее подводные камни? Каким образом Full-Stack разработка связана с технологиями C#/.NET? Все ответы на ваши вопросы вы получите на вебинаре Виталия Емца. Что нового в C# 8, 9? Автор — Алексей Никифоров, Software Engineer & Business Analyst at HYS-Enterprise C# — это универсальный объектно-ориентированный язык, который является мощным инструментом создания программного обеспечения с широкой областью применения. При столь высокой функциональности он является достаточно несложным в изучении и отлично подходит тем, кто собирается сделать первый шаг навстречу программированию. Данный вебинар предусматривает погружение в последние нововведения языка С#. Основной упор будет сделан на коммуникацию и обсуждение, предполагая, что участники вебинара — разработчики C#, которые следят за новинками данного языка. Автор пройдется по новым возможностям языка и обсудит, как эти изменения могут быть использованы с целью написания более выразительного и чистого кода. Алгоритмы и структуры данных в .NET Автор — Ярослав Кучук, .NET Developer На вебинаре рассматривается вопрос фундаментальной алгоритмической подготовки – от математического обоснования мощности алгоритма до стандартных алгоритмов и структур данных. Базовые алгоритмы реализованы на C#; автор анализирует их с точки зрения их мощности. На вебинаре рассматриваются следующие темы: Понятие алгоритма Сложность алгоритма и способы ее измерения Основные структуры данных Стек Очередь Связанный список Хеш-таблица Бинарные деревья поиска Красно-черные деревья Базовые сортировочные алгоритмы Базовые поисковые алгоритмы 5. Безопасность .NET веб-приложений: частые ошибки и методы борьбы с ними Автор — Алексей Голубев, Lead Software Engineer в компании SoftServe Цель вебинара — обратить внимание разработчиков на проблемы в сфере безопасности веб приложений, которые можно устранить еще на этапе разработки. На вебинаре автор рассказывает о наиболее частых ошибках в приложениях, уязвимостях, связанных со сторонними библиотеками, и то, как их можно избежать. Содержание вебинара: Авторизация. Кражи сессий и стойкости паролей. Человеческий фактор. Что разработчик может сделать не так и на что обращать внимание. Инъекции. Какие встречаются чаще и чем опасны WYSIWYG редакторы. Рандомизация. Случайности не случайны. Вебинар подойдет .NET разработчикам — приветствуются специалисты любого уровня. Будет много практической информации которую можно применить как на этапе разработки, так и на этапе проектирования систем. 6. Техники тестирования для C# разработчиков. Уровень Advanced Автор — Юрий Науринский, Senior Fullstack .NET Software Developer На вебинаре будет рассмотрено 3 «продвинутые» техники тестирования, которыми должен владеть опытный разработчик. Будет немного теории, примеры и ответы на вопросы. Все примеры на языке С#. Ниже перечислены техники, которые рассматриваются на встрече. Property based testing — техника тестирования, применяемая для проверки свойств функции, программы, системы. Ключевая идея в том, что описываются не заранее заданные ожидаемые значения, а свойства, которым должны удовлетворять тестовые примеры. Дальше, тестовые примеры генерируются случайным образом, постоянно проверяя, удовлетворяют ли они вышеописанным свойствам. Performance testing — одна из самых важных техник тестирования, которую желательно знать каждому разработчику, применяемая для ответа на вопрос, насколько быстро работает функция, программа, система, а также отдельные её компоненты. Также, может отвечать на вопрос, сколько памяти потребляет функция, программа, система. Load testing — техника тестирования, о которой желательно иметь представление каждому веб-разработчику; применяется для измерения поведения системы под различной нагрузкой, в частности нормальной и пиковой. Могут измеряться время ответа, пропускная способность, прочие бизнес-ориентированные метрики. 7. Docker для .NET разработчиков Автор — Алексей Никифоров, Software Engineer & Business Analyst at HYS-Enterprise Docker — это популярная платформа, которая используется при разработке, тестировании и развертывании программного обеспечения. Она позволяет сократить время между написанием кода и поставкой его на “production”. За последние годы популярность Docker’a сильно возросла и данная технология стала индустриальным стандартом в сфере контейнеризации программных решений. Docker может быть полезен очень широкому спектру специалистов: разработчик, тестировщик, администратор, релиз-менеджер и т. д. Несмотря на то, что Docker написан на Go и использует особенности ядра Linux, .NET разработчики, которые традиционно ведут разработку под Windows, могут получить огромную пользу от использования Docker’a на самых разных уровнях. Знание данного инструмента повысит вашу продуктивность и даст конкурентное преимущество на рынке труда. Вебинар будет полезен специалистам начального уровня, которые всегда хотели попробовать Docker. Ознакомление будет основано на .NET Core приложении. По завершению, вы смело будете ориентироваться в основных концепциях и инструментах и сможете успешно начать свою путь изучения Docker’а. 8. F# и функциональное программирование для C# разработчиков Автор — Альберт Ташу, .NET Developer, тренер-консультант учебного центра CyberBionic Systematics, а также сертифицированный специалист Microsoft С# — это мультипарадигменный язык, и с каждым релизом он приобретает всё больше возможностей, направленных на применение функционального программирования, которое является одной из самых востребованных парадигм в современной разработке программного обеспечения. Для того, чтобы легче было разобраться в этой парадигме, будет рассмотрен очень интересный язык платформы .NET — F#. Помимо этого, будут затронуты основные принципы функционального программирования и их применение при разработке на языке C#. Содержание вебинара: Введение в язык F# Основы функционального программирования Применение функциональных подходов при разработке на C# Рефакторинг проекта на С# 9. Создание игры “Space Invaders” на C# с нуля Автор — Армен Маилян, C#/.NET Developer, тренер-консультант CyberBionic Systematics Какой самый лучший способ изучить что-то новое? Конечно же, превратить это в игру! Этот способ хорош и в обучении программированию. Начните изучение языка C# путем создания консольной компьютерной игры. Обещаем минимум скучной теории и максимум практики. Будет интересно! Кому это будет полезно? Новичкам. Никогда не программировали? Это не повод отказываться от нового крутого опыта. У вас есть шанс сделать свою собственную игру на C# и получить опыт практического применения данного языка программирования, а также попробовать себя в роли разработчика игр. Начинающим C# разработчикам. Вы сможете углубить и применить на практике свои знания языка C# вместе с наставником. Чему вы научитесь: Разрабатывать простую игру на языке C#. Разбивать большую задачу на отдельные этапы и последовательно их реализовывать. Применять на практике процедурный и объектно-ориентированный подход для написания программ на С#. Понимать и применять основы алгоритмирования. Применять знания основ ООП для создания полноценной программы. Использовать функционал .NET Framework. 10. Создание эволюционной игры Conway's Game Of Life на C# + WPF Автор — Юрий Науринский, Senior Fullstack .NET Software Developer На вебинаре будет рассмотрен Game Of Life — клеточный автомат, придуманный английским математиком Джоном Конвеем в 1970 году — и его реализация с помощью языка программирования C# и фреймворка WPF. Прежде чем реализовывать игру, необходимо чётко определить задачу и постановку правил самой игры. Дальше будет рассмотрено, как реализовать саму логику игры без привязки к какому-либо фреймворку. Следующий логичный шаг после того, как была реализована основная логика игры — это рассмотрение привязки логики к фреймворку WPF и придание «жизни» игре. В конце вебинара автор расскажет, какие техники тестирования можно применить для гарантии корректности получаемого результата логики игры. Данный вебинар будет интересен C# разработчикам, которые желают углубиться в разработку приложений с использованием технологии WPF, а также хотят рассмотреть с практической точки зрения достаточно интересную и известную математическую игру.   Изучайте .NET разработку на 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  

Я работал с .NET-платформой на протяжении 5 лет – как в плане профессиональной необходимости в качестве бек-енд разработчика и архитектора, так и в плане определенных личных задач - таких как открытые и закрытые сторонние проекты. После нескольких лет работы с экосистемой PHP и имея солидный стаж в плане Java, я пришел к выводу, что язык C# для меня представляет, пожалуй, наибольший интерес – благодаря своему удобству и эффективности. Этот язык комплексный, тщательно продуманный и лично для меня в работе с C# лучшую среду программирования, нежели Visual Studio, человечество еще не изобрело. Более того, ASP.NET уже содержит в себе все, что необходимо веб-разработчику, не требуя установки дополнительных фрейморков и библиотек. Единственное, что меня не очень устраивало в плане .NET-системы, это ее «закрытость» и использование преимущественно Microsoft-платформы (хотя и существуют специальные Mono, которые позволяют в качестве альтернативы запускать шарп-проекты и под Linux, но достигается это ценой утраты целого ряда полезных фичей). По этой причине я обратил свое внимание на Node.JS, хотя мои коллеги называли JavaScript бесполезным языком, а Node.JS – хламом. Я был очарован однопоточной каллбэк-системой, я наслаждался, создавая REST API, используя ExpressJS. Но затем Microsoft выпустила кроссплатформенную технологию ASP.NET Core, и я призадумался, что же и когда стоит использовать. После чего я решил собрать как можно больше информации касательно возможностей и реализации тех или иных фичей двух технологий, после чего выбрал для себя, по моему мнению, наиболее удобную технологию, в рамках которой и развернул свой новый проект. Надеюсь, эта публикация вам тоже поможет прийти к определенному решению. Модель обработки запроса Node.JS Node.JS успел зарекомендовать себя как однопоточный обработчик запросов. Что это значит? Это значит, что вместо обработки каждого поступившего http-запроса внутри отдельного потока или процесса (наподобие Apache), обработка производится внутри одного потока. Подобный подход делает обработку запросов однопоточной, тогда как в Apachi\PHP обработка является многопоточной. Однако, что касательно Node.JS, здесь преимущество заключается в асинхронной работе системного ввода-вывода, которое, соответственно, не блокирует требуемый поток. Операция ввода\вывода производится в рамках отдельного потока, в то время как основной продолжает свою работу. Как только вторичный поток завершает свою работу, вызывается callback, который, соответственно, передает в контекст основного потока результат. С одной стороны, использование подобного подхода прекрасно подходит для приложений, интенсивно работающих с вводом\выводом. С другой стороны, появляется вероятность так называемого «ада обратных вызовов», который провялятся в цикличной сложности кода. Будем надеяться, что новая версия введёт в обиход полноценные async\await. Однопоточная модель обработки запросов Node.JS может быть сгруппирована при помощи использования нативной кластеризации, Nginx или PM2. ASP.NET (синхронный) Исторически так сложилось, что обработка запросов ASP.NET MVC (или Web Api) производится подобно Apache / PHP: каждый запрос обрабатывается внутри своего собственного потока пула потоков. И каждая команда ввода-вывода производится синхронно внутри каждого из потоков. В контексте жесткой работы с вводом-выводом подобный подход, конечно, менее удобный, если сравнивать со схемой Node.JS. Хвала Небесам, .NET Framework 4.5 вводит в C# async\await, что также исправляет сложившуюся ситуацию. ASP.NET Core (асинхронный) Паттерн async\await позволяет в полной мере ощутить все прелести асинхронного программирования. Действительно, теперь появилась возможность указать каждый обработчик запросов как асинхронный, благодаря чему работа с системой ввода-вывода будет производиться в контексте своего потока. Это позволит не блокировать основной поток. Подобная модель на базе Task`ов позволяет использовать обратные вызовы, ощутить все прелести асинхронности и прочее. .NET Core часто применяет паттерн async\await при интенсивной работе с системой ввода-вывода.   Async\await Node.JS VS Async\await ASP.NET Core Пример кода Node.JS для асинхронного запроса в базу данных: Пример того же кода на ASP.NET Core (фрагмент класса Startup):   Разница между двумя моделями в том, что ASP.NET Core способен обрабатывать большее количество запросов благодаря своей дефолтной параллельности. В то же время переключение между асинхронными потоками может занимать время в случае использования большого количества общих для многих потоков переменных. В такой ситуации все же Node.JS будет быстрее.   Много современных языков программирования, вроде того же C#, реализуют асинхронный ввод-вывод, который часто недооценен сообществом Node.JS-разработчиков, но который может приводить к приятным неожиданностям. В этом случае Node.JS в значительно меньшей мере технологичный, если сравнивать его с ASP.NET Core. Язык программирования Особенности и безопасность Вращаться в среде C#-разработчиков – значит выслушать множество критики в адрес динамической типизации и удивительных булевых преобразований JavaScript. Впрочем, эта критика является обоснованной, если учитывать, что JavaScript был разработан всего за 10 дней для динамического контента HTML.   С другой стороны, с того времени язык очень даже «вырос», и новая спецификация привносит такие фичи, как: Классы Новые идентификаторы (const, let), повышающие надежность кода Указательные функции Интерполяцию строк Генераторы Элементы рефлексии Впрочем, C# все равно остается намного более мощным языком программирования, ибо все вышеперечисленное – всего лишь небольшая часть того, чем может похвастаться строго-типизированный объектно-ориентированный язык программирования. Мне кажется, что для C# лучшей среды работы, нежели Visual Studio, просто не найти. Однако, если учитывать рост спроса на рынок микросервисов, большинство из особенностей подобных гигантов здесь не найдут свое применение. Изучение Если вы раньше работали с классической MVC-архитектурой, переход на Node.JS \ Express затребует некоторое время, чтобы привыкнуть. Некоторые же вещи могут вообще оказаться в новинку. Также нужно будет время для того, чтобы «переварить» событийно-ориентированную парадигму Node.JS. Что действительно может показаться запутанным впервые при работе со средними или большими приложениями, так это паттерны рефакторинга кода и, собственно говоря, архитектура кода. Так как функциональность Express.js очень гибкая, выбор «правильной» архитектуры и файловой структуры может быть затруднительным. С другой стороны, для создания качественного приложения без этого – никак. Что же касается ASP.NET (Core) MVC / WebApi, то тут уже предоставляется готовая файловая структура. Да, разработчик может применить немного «креативности» при создании бизнес-логики и слоя для работы с базой, но предопределенность архитектуры упрощает разработку. Однако, в случае с маленькими приложениями, JS-платформа более предпочтительна, так как позволяет написать сайт-визитку с использованием одного лишь js-файла и одного лишь package.json. Продуктивность Я обнаружил, что написание простого кода является более быстрым при использовании Node.JS. Причина в том, что простые приложения тут проявляют большую «гибкость». Также возникают вопросы касательно типизации языка, так как в некоторых случаях оказывается, что динамическая типизация является скорее плюсом, чем минусом. С другой стороны, я заметил, что при написании объемного кода, более читабельным он оказывается при работе с C#, чем с JavaScript. Думаю, причина этому – строгие ооп-парадигмы. Что касается отладки и юнит-тестирования, тут C# / Visual Studio также показывают лучшую продуктивность, хотя и сказать, что JavaScript совместно с Visual Studio Code пасет задних, нельзя. Время построения маленьких js-приложений также меньше. Екосистема В этом плане две технологии отличаются больше всего. Node.JS обязана своим развитием в основном сообществу, которое и разработало для неё большее количество существующих популярных библиотек. С одной стороны, вы чувствуете себя очень свободно в выборе модулей для разработки. С другой же, внезапное обновление одного из пакетов, отсутствие надлежащей проверки на ошибки и стабильность, в некоторых случаях могут легко привести к обвалу всего приложения. ASP.NET Core технология разработана проверенной командой профессионалов из Microsoft. И она предоставляет абсолютно все, что необходимо разработчику веб-приложений любых направлений. Кроме того, сторонние библиотеки также качественно выполнены и разработаны другими крупными проверенными компаниями. Один из многочисленных примеров – ORM-инструменты. Entity Framework, официальный инструментарий для работы с базой данных, предоставляет абсолютно все, что необходимо разработчику. Публикация и запуск А вот это та область, где Node.JS, без сомнения, лидирует. Технология является открытой, кросс-платформенной, поддерживает докеризацию. Это значит, что вы запросто сможете запустить свое приложение под такими платформами: На собственном Linux, Windows или Mac-сервере. Все, что для этого нужно – это движок Node.JS и реверсивный прокси-сервер (наиболее популярный – Nginx). Докер-контейнер. Большинство PaaS-провайдеров (AWS, Google App Engine, Azure, Heroku, …) Сервис Now, который позволяет провести запуск Node.JS-приложения в одну строчку без предварительной конфигурации. Также есть много подходящих CI & CD – платформ. Что же в случае ASP.NET-стека, тут все обстоит несколько печальнее. Хотя и ASP.NET Core также кросс-платформенная, количество сервисов для публикации несоизмеримо меньшее. Вот какие хостинги я знаю на данный момент: Собственный Windows-сервер с классическим IIS. Собственный Linux-сервер с реверсивным прокси. Докер-контейнер под Windows. Работает отлично, но занимает много места. Некоторые облачные сервисы PaaS. В основном, Azure, но есть также некоторые неофициальные билды Heroku. Заключение Node.JS обладает асинхронной событийно-ориентированной моделью обработки запросов, которая не очень то и уступает многопоточной async\await модели ASP.NET. Производительность Node.JS – приложений не всегда лучше, чем ASP.NET Core. Можно сказать, она даже хуже. Язык JavaScript не так уж и плох (и становится лучше!). А использование его вместе с Node.JS может дать приятный результат. ASP.NET (Core) лучше всего подходит для объемных приложений и предоставляет все необходимые разработчику инструменты высшего качества. Для микро- или среднеразмерных сервисов Node.JS предоставляет широкие возможности в плане публикации. И, как всегда, не существует одного лучшего инструмента «на все случаи жизни». Попробуйте доступные и подберите для себя тот, который лучше всего отвечает вашим требованиям. Автор перевода: Евгений Лукашук Источник

Добро пожаловать в наш небольшой сборник советов от ведущих разработчиков на платформе Node.JS! Цель сей статьи – обобщить все те знания, которые были в свое время опубликованы в различных обучающих постах или журналах. Автор статьи – Йони Голдберг, независимый разработчик и консультант Node.JS. Итак, начнем! 1) Мониторинг Что это: мониторинг – это такая интересная игра в «найти баг быстрее, чем это сделают твои пользователи». И, помимо прочего, эта игра обладает беспрецедентной важностью. Современный рынок переполнен всеми видами предложений - на любой вкус. Учитывайте: вы должны строго следовать заданной концепции, не переполняя ее различными «доп. фичами». Подберите для себя такое решение, которое удовлетворяет всем требованиям. В противном случае - провал. Разочарованные клиенты. Все просто.   2) «Умное логгирование» - Ваш друг Что это: логи, как правило, очень быстро превращаются в свалку утверждений и записей всех видов и типов. Однако при должном подходе, логи являют собой образец чистоты, легко дающие понять всю необходимую информацию, связанную с программой. Планируйте ведение логов с самого начала: как они будут собираться, храниться и анализироваться. Убедитесь, что желаемая информация (такая, как частота возникновения ошибок и прочее) в любой момент может быть легко извлечена. В противном случае: вы окончите бесконечными копаниями в нечитабельных логах и, в конце концов, потратите уйму времени на «костыли», дабы понять хоть что-то из написанного.   3) Сваливайте все возможные задачи на обратный прокси Что это: увы, но Node.JS ужасен, когда речь заходит о выполнении ресурсоемких задач на центральном процессоре (такие, как g-zip упаковка, SSL-терминация и прочее). Используйте вместо этого промежуточные middleware-сервисы, такие как nginx, HAproxy или облачные. В противном случае: Ваша невинная однопоточная операция займет процессор на длительное время. Как следствие, ваше устройство будет уделять больше времени различным промежуточным задачам, нежели непосредственно Node.JS-приложению. Не буду говорить о производительности.   4) Блокируйте зависимости Что это: код должен быть идентичен для всех сред. Однако, на удивление, можно обнаружить, что NPM творит с зависимостями что-то неимоверное – как только Вы попытаетесь установить пакет в различных средах, программа пытается использовать последнюю версию, характерную для конкретной среды, что, безусловно, вносит свои особенности. Дабы избежать этого, используйте файлы конфигурации. npmrc. Они настраивают NPM таким образом, чтобы тот сохранял текущую версию пакета, не последнюю. Как вариант Вы можете использовать “shrinkwrap”-опцию, так как NPM5 блокирует зависимости по умолчанию. В противном случае: во время тщательного теста QA пропустят версию, которая в продукции будет вести себя неожиданным для разработчика образом. Даже хуже, разные серверы одновременно в том же кластере будут исполнять разный код.   5) Выбирайте правильные инструменты: экономьте время Что это: процесс должен выполняться и перезапускаться в случае ошибок. Возможно, в обычной ситуации в качестве рестартера может сгодиться и что-то наподобие PM2, но в современном мире, где правит балом Докер и его приспешники, все подобные инструменты должны быть подобраны особенно тщательно. В противном случае: использование десятков приложений с сотнями своих инструментов в конце концов приведет к хаосу.   6) Убедитесь, что вы используете только лучшие практики отлавливания багов Что это: как правило, анализ ошибок – наиболее затратная по времени и устрашающая процедура в поддержании стабильности Node.JS-среды. В основном, причина этому – однопоточная модель приложений и отсутствие выработанной стратегии по отношению к ошибкам в многопоточной среде. Быстрых решений не существует, Вы должны в полной мере осознать и приручить это багнутое чудовище.   7) Используйте все ядра процессора Что это: в своей стандартной ипостаси приложения Node.JS используют только одно ядро процессора, в то время как остальные в задаче никакого участия не принимают. Ответственность за утилизацию всех ядер лежит только на Вас. К примеру, для небольших и средних приложений Вы можете использовать Node Cluster или PM2. Для более полновесных программ обратите внимание на репликацию процесса при помощи Docker-кластера (такие, как K8S, ECS) или деплоймент-скрипты на базе инициализации Linux (system – как вариант). В противном случае: Ваше приложение, скорее всего, будет использовать только 25 процентов доступных вычислительных ресурсов (!) или даже меньше. Заметьте, типичный сервер минимум 4-х ядерный, наивный деплой обычного NodeJS использует лишь одно (даже если Вы используете PaaS сервисы наподобие AWS beanstalk)!   8) Разумно планируйте диагностику Что это: работайте с системной информацией как с количеством используемой памяти или REPL и специальных защищенных API. Хотя полагаться на стандартные инструменты и надежней, некоторую ценную информацию и некоторые операции лучше извлекать и производить напрямую в коде. В противном случае: в один прекрасный момент Вы обнаружите, что тратите очень много информации на деплой – поставляя код в продукцию просто затем, чтобы получить некоторую информацию для диагностики.   9) Используйте APM-программы Что это: программы мониторинга вроде APM, чтобы активно оценивать кодовую базу. Посему и их действия могут выходить за рамки действий простых программ мониторинга. К примеру: некоторые APM подсвечивают проблемные транзакции, которые могут вызвать падения производительности на стороне клиента и предполагают причину подобных проблем. В противном случае: Вы можете провести тонны времени на анализ производительности и поиски проблемных мест. Вероятно, Вы так никогда и не будете уверенными, что именно замедляет работу Вашего приложения больше всего и как приложение будет вести себя в «реальном мире».   10) Завершенный код – завершенный продукт Что это: «только идеальный код может быть выпущен в продукцию». Запомните это с самого первого дня разработки. Возможно, это и звучит как что-то из репертуара законченного перфекциониста, но, поверьте, результат того стоит. В противном случае: IT-сообщество вряд ли оценит и сохранит для потомков плохо написанную систему.   11) Обращайте внимание на защиту Что это: Node.JS включает в себя некоторые уникальные защитные механизмы. Понятно и без слов, что более «защищенная» система требует больше времени на ее анализ. В противном случае: что может быть хуже, чем брешь в защите, когда продукт уже в производстве? Просто банальная проблема, которую Вы забыли исправить.   12) Отслеживайте и контролируйте память Что это: Node.JS достаточно неоднозначно работает с памятью: движок v8 обладает ограничением в виде 1.4 ГБ, и были известны случаи, когда код был излишне «памятозатратным». Потому и контроль над использованием памяти – вопрос отнюдь не тривиальный. В небольших приложениях Вы можете настраивать работу с памятью, время от времени используя команды оболочки. Однако в проектах больших масштабов позаботьтесь о выводе состояния памяти в  надежную систему мониторинга. В противном случае: вы обнаружите ежедневную «утечку» памяти в несколько сотен мегабайт, как это произошло с Walmart.   13) Разделяйте клиентскую и серверную часть Что это: для фронт-енд части используйте такие middleware компоненты, как nginx, S3, CDN и прочие. Выполнение подобных задач на Node.JS-сервере очень плохо сказывается на его производительности. Причина этому: обработка великого множества статических файлов в однопотоковой модели. В противном случае: Ваш единственный Node.JS-поток будет занят обработкой сотен html/изображений/angular/react-файлов вместо того, чтобы заняться непосредственно обработкой динамического контента. Или, другими словами, того, для чего и была разработана технология Node.JS.   14) Храните данные вне сервера Что это: сохраняйте любую информацию – будь то пользовательские сессии, кэш, загруженные файлы – на внешнем накопителе. Представляйте, как будто Ваш сервер будет регулярно «падать». Используйте «безсерверную» платформу (например, AWS Lambda). В противном случае: «падение» конкретного сервера в результате приведет не только к утилизации нерабочей машины, но и к падению производительности самого приложения. Более того, зависимость от конкретного сервера значительно уменьшит гибкость всей системы.   15) Используйте инструменты с автоопределением уязвимостей Что это: даже такие проверенные временем зависимости, как Express и другие, имеют бреши, которые время от времени могут ставить всю систему под угрозу. Однако подобное можно легко обойти, если использовать различные бесплатные или коммерческие продукты, которые постоянно проверяются на предмет уязвимостей и могут быть мгновенно исправлены в случае необходимости. В противном случае: держать код в чистоте и без уязвимостей в случае неиспользования соответствующих инструментов затребует постоянного отслеживания новостных сводок и обновлений. Немного напрягает.   16) Присваивайте каждой записи лога свой TransactionId Что это: присваивайте уникальный идентификатор каждой записи в логе. Подобный подход в значительной мере упростит работу и поиск ошибок. К сожалению, из-за асинхронной природы Node.JS реализовать подобное – задача отнюдь не тривиальная. В противном случае: Поиск производственных ошибок будет достаточно длительным. Как следствие, Вы закопаетесь в логе ко всем чертям.   17) NODE_ENV = production Что это: устанавливайте переменной окружения NODE_ENV значение production или development. Это нужно для того, чтобы указать NPM, включить ли оптимизацию или нет – так как многие подобные сервисы обладают опцией автоопределения состояния среды. В противном случае: игнорирование этого нюанса может сильно замедлить производительность. К примеру, если проигнорировать NODE_ENV, используя Express для серверного рендеринга, производительность упадет в три раза!   18) Развертывайте приложение быстро Что это: исследователи отмечают, что команды, которые проводят большее количество Node.JS-размещений, имеют меньший риск столкнуться с целым рядом проблем. Быстрые и автоматизированные размещения, не требующие рискованных ручных этапов и сервисов, в значительной мере ускоряют процесс размещения. Возможно, Вам стоит обратить свое внимание на Docker в комбинации с CI-инструментами. В противном случае: длительное размещение -> падения производительности и человеческие ошибки -> неуверенность команды -> меньшее количество размещений и, как следствие, потенциальных фич.   19) Помещайте NPM-версию в каждое размещение Что это: с каждым новым релизом указывайте в package.json-версию текущего NPM. Это внесет ясность в работе с приложением. Сей фактор важен, так как, к примеру, в среде MicroService некоторые сервисы могут обращать внимание на версию Вашего NPM. Вы можете использовать команду “npm version”, которая укажет версию автоматически. В противном случае: достаточно часто разработчики пытаются исправить баг, часто в конце обнаруживая, что они ищут его не в той версии, в которой стоило бы.   20) Следите за актуальной информацией Традиционное: отслеживайте последние обновления Node.JSб NPM и прочих технологий, с которыми Вы работаете. До новых встреч! Автор перевода: Евгений Лукашук Источник

10 отменных советов как стать лучшим Node.JS разработчиком 2018 года от автора Азата Мардана. Эта статья содержит в себе собранный и тщательно отфильтрованный опыт писателей и спикеров технологии всего Веб-сообщества. Заметка: первоначально заголовком статьи должно было быть «Лучшие практики Node.JS от Гуру Технологии». Эта статья охватывает не «новые» и «лучшие» практики 2017-2018 года, а тщательно выверенные и проверенные временем и практикой паттерны, которые стопроцентно приведут к успеху. И хотя многие из проверенных практик Вам определенно пригодятся в 2018, 2019 и даже более поздних годах, статья не включает в себя такие новшества, как async/await и прочее. Почему? Потому что эти фичи не включены в состав, собственно говоря, кода Node.JS-ядра или кода таких популярных проектов как npm, Express и прочие. Полноценно заниматься разработкой на Node.JS я начал в 2012 году, когда присоединился к Storify. С тех пор я никогда не жалел о принятом решении и не ощущал, как будто я многое потерял, закинув Python, Ruby, Java или PHP – языки, с которыми я работал на протяжении предыдущего десятилетия. Работа в компании Storify для мня оказалась достаточно интенсивной. В отличии от большинства компаний, все приложения Storify работают исключительно на JavaScript. Как вы понимаете, большинство компаний, особенно такие крупные как PayPal, Walmart или Capital One, используют Node.JS только для конкретных определенных задач. Как правило, это gateway API. Однако, с точки зрения программиста, ничего не может быть лучше, чем работа и погружение с головой в одну определенную технологию. Краткая сводка: Избегайте нагромождения – пытайтесь разбивать свой код на столько мелких составных частей, насколько это вообще возможно. И даже больше. Используйте асинхронный подход – избегайте синхронное программирование словно чумы. Избегайте блокировки потоков – помещайте ВСЕ требуемые утверждения в начало файла, ибо они синхронные и, следовательно, будут блокировать программу. Require должен быть закеширован – считайте, это такая фича в Вашем коде. Или баг. Как Вам угодно. Всегда проверяйте свой код – ошибки – это не вышивание, которое можно выбросить в любом момент. Никогда не упускайте обнаруженные ошибки! Используйте try…catch только в синхронном потоке – try…catch бесполезен в асинхронном коде. Кроме того, v8 никогда не оптимизирует try…catch-код. Возвращайте значения или используйте if…else – просто на всякий случай: возвращайте значения что бы остановить выполнение участка кода. Обращайте внимание на события ошибок – почти все Node.JS-классы или объекты реализуют паттерн-наблюдатель и производят события-ошибки. Не стоит пропускать их. Познайте свой npm – устанавливайте модули с ключами –S или –D вместо –save или –save-dev. Используйте текущие версии в package.json – при работе с npm он по-тупому просто добавляет верхнюю скобочку по умолчанию при использовании вместе с ключом –S. Дабы избежать этого, просто вручную блокируйте версии. Никогда не доверяйте semver в своих приложениях, но доверьтесь ему в модулях с открытым исходным кодом. Бонус – используйте разные зависимости. Помещайте то, что требует проект только в процессе разработки в devDependencies. После этого используйте npm i –production. Чем больше ненужных зависимостей используется, тем больше риск возникновения уязвимостей.   Давайте разберем некоторые из этих пунктов поподробнее: Избегайте нагромождения Взгляните на некоторые модули, написанные Исааком З. Шлейтером, создателем npm. К примеру, use-strict включает «строгий» режим написания JavaScript-модульного кода. Включается эта опция всего лишь в три строчки: Но почему-же все-таки стоит избегать нагромождения кода? Одна известная фраза американского воздушного флота гласит: «все должно быть просто до идиотизма». И на это существуют свои причины. Человеческий разум не может держать в памяти больше чем от 5 до 7 вещей одновременно. Это просто как факт. Разбивая код на небольшие составные части, Вы и другие разработчики легко сможете разобраться в нем и понять, для чего он предназначен. Так же упрощается процесс тестирования. Вот пример:   Или еще: Уверен, большинство из Вас отдадут предпочтение второму примеру, когда имена переменных сразу же делают понятной их суть. Конечно, в процессе написания кода Вы можете думать, что Вы понимаете, как он работает и так. Возможно, Вам даже захочется продемонстрировать свою смекалку и сообразительность, объединив несколько методов вместе в одну строку. Пожалуйста, пишите так, как если бы Вы были более неопытны. Как если бы Вы не смотрели в код на протяжении 6 месяцев, или очень устали и, кроме того, еще и выпили. Если Вы пишете код на пике своей ментальной активности, Вам будет труднее понимать его позже, не говоря уже о Ваших коллегах, которые даже не знакомы с ходом Ваших мыслей. Держать все в относительной простоте единственно верный метод – особенно в рамках Node.JS-технологии, где используется асинхронный подход. Другими словами, преимущества от использования подхода малых частей значительно более перевешивают недостатки. Помимо прочего, они позволяют значительно быстрее исправить различные ошибки, которые могут возникнуть по разным причинам в процессе работы с Node.JS-приложением.   Используйте асинхронный подход Синхронный код мало где используется в нынешнем Node.JS. Как правило, он находит свое применение в написании CLI-команд или скриптов, не связанных с веб-приложениями. Что же касательно веб-разработки, Node.JS программисты предпочитают использовать асинхронный подход, так как это позволяет избежать блокировки потоков. К примеру, синхронный код будет приемлем, если мы строит скрипт для работы с базой данных, не системы для обработки параллельных/конкурентных задач: Но, в случае веб-приложения, лучше использовать следующее: Отличительная особенность состоит в том, пишите ли вы долго исполняемый конкурентный код или небольшой скрипт с малым временем жизни. А вообще, лучше запомните одно хорошее правило: всегда пишите асинхронный код в Node.JS.   Избегайте блокировки require S обладает простой системой загрузки модулей, которая использует общий формат CommonJS. Самый простой способ подключить модули, разбросанные по отдельным файлам – использовать встроенную функцию require. В отличии о AMD/requirejs, Node/CommonJS синхронна. По сути, функция работает согласно следующему принципу: Вы импортируете то, что было экспортировано в виде модуля или файла. О чем большинство разработчиков даже не догадывается, так это о том, что require кэшируемая. Потому, до тех пор, пока нет заметных изменений зарезервированного имени файла (и, в случае использования npm-модулей, их нет), код модуля будет выполнен и подгружен в переменную только единожды (для обработки). Подобная методика позитивно сказывается на оптимизации. Однако, даже с кэширование, лучше сначала попробуйте обойтись без require. Попробуйте использовать axios-модули. Путь /connect в свою очередь будет медленнее чем требуется, ибо импорт модулей происходит после генерации запроса: Гораздо лучше будет загрузить модули тогда, когда сервер еще даже не определен, не в маршруте: Require должен быть закэширован Хотя я и упоминал о том, что require может быть закэширован, но что так же интересно, так это то, что мы можем поместить код вне module.exports. К примеру: Зная, что некоторые участки кода могут быть запущены только один раз, подобная реализация окажется более чем полезной.   Всегда проверяйте свой код Node.JS – это Вам не Java. В Java Вы выкидываете исключения потому как в большинстве случаев Ваше Java-приложение не должно продолжать работать в случае ошибки. В Java для этого Вы просто используете try…catch. В случае Node.JS история обстоит несколько по-иному. Так как технология выполняется в асинхронном режиме, контекст ошибки всегда будет отделен от любого перехватчика (такого как try…catch) в случае возникновения самой ошибки. Этот код в Node.JS будет просто-напросто бесполезен: Но! Привычный try…catch все еще может быть использован в синхронном режиме. Вот более действенный рефакторинг предыдущего участка кода: Если мы не можем обернуть request-вызов в блок try…catch, ошибка будет не перехвачена. Однако, это легко решается при помощи callback-аргумента error. Кроме того, Вам нужно всегда вручную отлавливать error в каждом и каждом callback`е. Проверяйте наличие ошибки (и убедитесь, что она не равна null) и затем, или демонстрируйте содержание ошибки пользователю или клиенту и потому логируйте ее, или отправляйте ее обратно в место вызова при помощи error-callback`а. В качестве небольшого фокуса Вы можете использовать библиотеку okay. Применяйте ее как наведено ниже что бы обойти ручной проверки на ошибки: Возвращайте значения или используйте if…else .JS – параллельный. Эта особенность может привести к багам, если не отнестись к ней с должной осторожностью. Что бы обезопасить себя, останавливайте выполнение участка кода при помощи ключевого слова return: Избегайте бессмысленной работы (и ошибок) из-за неостановленного вовремя исполнения: Просто убедитесь, что return всегда будет стоять на страже целесообразности работы Вашего кода.   Обращайте внимание на события ошибок Почти все классы/объекты Node.JS реализую паттерн-наблюдатель, который порождает событие-ошибку. Это прекрасная возможность для разработчика отловить особо подлые ошибки и придушить их до того, как они устроят хаос. В качестве полезной привычки было бы неплохо создавать программы-прослушиватели событий-ошибок при помощи использования .on(): Познайте свой npm Многие Node.JS и front-end событийные разработчики знают, что –save (для npm install) не только установит модуль, но так же и создаст запись в package.json с упоминанием текущей версии модуля. Для аналогичных целей существует и –save-dev, опция для модулей, которые нужны только во время разработки. Но знаете ли Вы, что вместо этого можно спокойно использовать –S и –D? Теперь да. И пока Вы в режиме установки модулей, удаляйте символ ^, который будут порождать команды –S и –D. Эти значки могут быть особенно опасными, так как они позволят npm автоматически обновить модуль к последней незначительной версии (вторая цифра в семантике версирования). К примеру, с версии 6.1.0 до версии 6.2.0. Команда NPM полагается на semver, но Вы не должны. Я хочу сказать, что они используют авто обновления к промежуточным версиям модулей с открытым исходным кодом, так как они полагают, что никаких радикальных изменений в этих самых промежуточных версиях не будет. Мой вам совет: не стоит слишком в это верить. Более того, используйте npm shrinkwrap. Команда создаст новый файл с текущими версиями зависимостей зависимостей. И в заключение В этом посте мы охватили много всего: от работы с callback'ами до работы с асинхронными потоками, проверки на ошибки и снятия блокировки зависимостей. Надеюсь, Вы нашли для себя что-то новое и познавательное здесь. Немного об авторе Азат является техническим консультантом и менеджером в Capital One. JavaScript/Node.js-эксперт, автор различных онлайн-курсов. Издатель более чем 12 книг, посвященных теме, включающие такие хиты продаж как Full Stack JavaScript, React Quickly, Practical Node.JS и Pro Express.js и другие. В свое свободное время Азат читает о технике на Webapplog.com, проводит конференции и работает над продуктами с открытым исходным кодом. До того, как стать экспертом Node.JS, работал в федеральных правительственных агентствах США, принимал участие в небольших старт-апах и больших корпорациях, имея дело с такими технологиями, как Java, SQL, PHP, Ruby и прочие. Азат обожает все, что связано с технологиями и финансами, так же увлекается инновационными способами обучения и просвещения людей. Автор перевода: Евгений Лукашук Источник