5 причин использовать AngularJS в вашем корпоративном приложении
Нынешнюю ситуация в мире корпоративных приложений можно описать одним словом: хаос.
Начиная с устаревшего кода, который в течении N лет переходил от разработчика к разработчику без всякой документации. До слишком сложных интерфейсов, которые слишком усложняют код. До смешивания вместе N технологий в одном единственном приложении. Посмотрим фактам в лицо: когда эти вещи создавались, никто не задумывался об их поддержке. Сегодня мы столкнулись с проблемой – как исправить все эти приложения? С чего начать? Как привнести в них здравый смысл? Как привести их к современному технологическому стеку?
Этот пост представляет мое мнение о том, почему использование AngularJS в корпоративных условиях не только привнесет здравый смысл в ваши приложения, но и позволит им развиваться.
1) Начинайте постепенно
В корпоративной среде вы скорее столкнетесь с безобразным заброшенным проектом, нежели с новым и свежим. С проектом, который много раз перекраивали. Разобраться в нем настолько сложно, что разработчики чаще выбрасывают код и переписывают заново. Это, конечно же, влияет и на стоимость, и время.
С фреймворком AngularJS такого не происходит. Вы можете начать, включая его в некоторые места вашего приложения, которые вы можете не спеша начать переписывать.Поверьте, я так делал раньше, и это действительно РАБОТАЕТ. И это не только работает, но и позволяет заложить начало для замечательного приложения. Учитывая тот факт, что вы можете поместить ng-app в любом месте, вы можете сказать, например: «Эй, почему бы нам не начать обновление этого приложения с домашней страницы». Затем ваш back end разработчик пишет веб-сервисы (да, я front end разработчик), вы начинаете писать ваши тесты с Karma Test Runner и очень скоро у вас внезапно появляется Контроллер, Вид и Модель для домашней страницы приложения. Все это контролируется с помощью AngularJS и красиво инкапсулировано в своем собственном маленьком мире. Мой друг, ты только что сделал очень очень хорошее дело.
2) Быстрая адаптация разработчиками
Технологии меняются так быстро, что идти в ногу со временем стало довольно сложной задачей. Либо у вас есть правильные способы обучения, либо вы мучаетесь, читая разнообразные книги O'Reilly, и пытаетесь выяснить, как все эти штуки работают.
Одна из замечательных вещей, которая не так давно стала широко известной – это Javascript MVC фреймворки. Они обязаны своим появлением тому, что сообщество поняло, насколько сложно стало поддерживать и разбираться в Javascript. Javascript MVC фреймворки – это хороший инструмент, который нужно изучать и применять в случае необходимости. Например, в нашем случае, в веб-приложениях.
В случае AngularJS, даже если вы абсолютно ничего не знаете о JavaScript MVC фреймворках, вы можете смело открывать официальный сайт AngularJS, посмотреть обучающее видео (кстати довольно классное) и через около 10 уроков (15-30 минут) вы будете точно знать откуда начать и как создать приложение, используя Модель, Вид и Контроллер (MVC), и, что немаловажно, иметь возможность все это протестировать.
Это позволяет большим командам просто зайти в интернет в любой момент, пройти обучение на сайте и, поскольку они обучаются из одного источника, участники команды могут задавать друг другу вопросы и изучать фреймворк в удобном им темпе. Это особенно важно, если у вас есть команда, участники которой работают удаленно друг от друга.
3) Производительность и масштабируемость
Возможность быстро выстраивать проект со всеми необходимыми деталями – это ключ к быстрому началу работы и эффективности. На моей памяти были проекты, когда около недели уходило только на то, чтобы все установили и ознакомились со всем, что необходимо для проекта. Это замедляет производительность и это явный признак того, что чего-то не хватает.
Чтобы исправить это, мы можем воспользоваться Yeoman. Yeoman – это workflow, состоящий из коллекции инструментов, которые позволяют быстро начинать, запускать и собирать проекты.
Yeoman довольно хорошо работает с AngularJS (что имеет смысл, так как они часть одной семьи). Yeoman позволит вам (с помощью генераторов) создать репозиторий AngularJS, в который будет включена последняя версия Twitter Bootstrap, разные штуки из angular, Karma Test Runner и т.д. А также склеить всё это вместе, просто инициализировав репозиторий в папке с любым названием (желательно связанным с вашим приложением). Yeoman будет использовать это название для создания пространства имен приложения и вместе с этим создаст образец (sample) вида, связанного с образцом контроллера, связанного с образцом теста.
Такая структура не только позволяет быстро собирать что-то, но и создает основу для построения чего-то намного большего. Кроме того, как только вы стали готовы к релизу, просто запустите команду grunt и ваши файлы будут сжаты и комбинированы (используйте ngmin) и размещены в отдельной папке. Разве это не прекрасно!
Помимо всего прочего, так как вы создаете single page application, все должно быть RESTFUL, то есть это приложение может и будет взаимодействовать с ЛЮБЫМ бэкэндом, если он будет выдавать подходящий JSON. Так как мы разделяем код и логику, приложение будет легче масштабировать и развивать.
4) Тесты тесты тесты
Ситуация: в проекте тысячи, может быть сотни тысяч строк кода. Вас бросили прямо в середину. Нет никакой документации и нужно срочно имплементировать новую функцию. Вы начинаете возиться с кодом и скоро понимаете, что что-то еще сломалось, и вы понятия не имеете почему… теперь вам придется потратить часы, возможно дни блуждания по запутанному коду, чтобы понять, каким образом ваши изменения сломали что-то еще… плохо, очень, очень плохо.
Одной из самых важных вещей для поддержания большого объема кода на протяжении длительного времени является использование тестов. С помощью Karma Test Runner, который вам дадут генераторы AngularJS в Yeoman, вы можете постоянно выполнять юнит тесты в фоновом режиме. Таким образом, если вы что-то изменили и нажали «сохранить», ваши тесты буду автоматически выполнены и вы сразу узнаете, сломали ли вы что-то, где вы это сломали, а если тесты построены верно, то, возможно, даже почему вы это сломали.
Это очень полезно, потому что обычно разработчики вставляют новый кусок кода следующим образом. Они добавляют 10-15 строк, сохраняют, и бац, что-то ломается. Тогда они комментируют 8 строк кода или вроде того. Сохраняем, запускаем заново, все еще не работает? Нет? Понятно, значит ошибка должна быть в этих 2-5 строках.
Гораздо проще делать так, чем перемещаться через N файлов и скрытых зависимостей и пытаться понять, о чем думал предыдущий разработчик, когда это писал.
5) Хорошая поддержка сообщества
Часто вы застреваете в одном куске кода и у вас нет ни малейшей идеи, почему он не работает. До сих пор сообщество меня ни разу не подводило, когда речь заходила о помощи с решением проблемы. Я задаю вопрос на Stackoverflow или в группе Google и через несколько часов или даже минут я получаю ответ, который мне был нужен, иногда даже от самой команды разработчиков AngularJS! И это помогает не только вам, ведь, когда ваша проблема решена, другие разработчики могут использовать это решения для себя. Это ускоряет процесс обучения и обнаружение каких-либо потенциальных сбоев. Это, по сути, заключенный в себе процесс, который продолжает развиваться и расти.
Вывод: использование очень самоуверенного JavaScript MVC фреймворка вроде AngularJS – это отличный способ начать зачистку старого кода, начиная с малого и шаг за шагом привнося здравомыслие в ваш проект. Если ваша команда разработчиков не находится на переднем крае, они могут пройти обучение AngularJS онлайн в своем темпе и научиться его использовать. Когда они готовы к разработке, они могут включить Yeoman и начать использовать такой «апгрейд» в течение нескольких минут, используя AngularJS, Twitter Bootstrap, Karma Test Runner и многие другие плюшки, которые предоставляет Yeoman. Когда разработчик начинает сборку, он может использовать метод разработки через тестирование для создания юнит тестов и тестовых сценариев для всего, что он собирает в AngularJS. Это будет гарантией того, что если в будущем кто-то новый включится в проект и захочет внести изменения, ему будет гораздо проще это сделать. И с большим пониманием, на что повлияет его код.
AngularJS – не окончальное пуленепробиваемое решение, но оно помогает прокладывать дорогу к классным штукам, которые будут представлены в новых версиях JavaScript, например Object.observe, лучше контролируемый scope и т.д. В теории эти нововведения (и я сам в это верю) принесут порядок и более естественные способы разработки во все приложения, которые используют JavaScript.
