Главная → Программирование → by

Путешествие по джунглям JavaScript MVC

При написании веб-приложений с нуля, это легко почувствовать, что мы можем получить, просто опираясь на DOM манипуляции библиотеки (например, jQuery) и несколько полезных плагинов.Проблема заключается в том, что она не займет много времени, чтобы затеряться в куче вложенных JQuery обратные вызовы и DOM элементов без реальной структуры для наших applications.

Короче говоря, мы застряли с спагетти code.К счастью, существуют современные рамки JavaScript, которые могут помочь с приведением структуры и организации наших проектов, улучшения, как легко обслуживании они находятся в долгосрочной run.

Что такое MVC, или, скорее, М.В. *

Эти современные рамки предоставляют разработчикам простой путь к организации своего кода, используя вариации картины известного как MVC (Model-View-Controller).MVC отделяет проблем в приложении на три части:

  • Models представляют собой предметно-ориентированных знаний и данных в приложении.Думайте об этом как “типа” данные, которые вы можете модель — хотелось пользователей, фото или записки.Модели должны уведомлять кого-либо наблюдения об их текущем состоянии (например Просмотров)
  • Views Обычно считается пользовательского интерфейса в приложениях (например, разметку и шаблоны), но не должно быть.Они должны знать о существовании модели для того, чтобы наблюдать за ними, но не напрямую общаться с them.
  • Controllers ручка ввода (например, клики, действия пользователя) в приложении и представлений можно рассматривать как обработку продукции.Когда контроллер обновляет состояние модели (такие как редактирование надписи на фото), она непосредственно не сказать View.Это то, что наблюдения за природой представления и модели отношений for.

“MVC” наличие структур, которые могут помочь нам структурировать наш код не всегда строго следуйте приведенным выше шаблоном.Некоторые структуры будет включать в себя ответственность контролера в представлении (например, Backbone.js), в то время как другие добавлять свои собственные компоненты упрямый в миксе, поскольку они считают, что это более effective.

По этой причине мы имеем в виду такие структуры, как после MV шаблон *, то есть, вы, вероятно, иметь свое мнение и модели, но более вероятно, есть что-то еще также included.

Примечание: Там также существуют вариации MVC известный как MVP (Model-View-Presenter) и MVVM (Model-View ViewModel).Если вы новичок в этом и чувствую, что это много, чтобы принять, не волнуйтесь.Это может занять некоторое время, чтобы получить вашу голову вокруг модели, но я написал больше о вышеупомянутой модели в моей книги онлайн Learning JavaScript Design Patterns в случае, если вам нужна дополнительная help.

? Если Вам нужен JavaScript М.В. * Framework

При строительстве одной страницы приложения, используя JavaScript, является ли это включает в себя сложный пользовательский интерфейс или просто пытается уменьшить количество запросов HTTP требуется для новых взглядов, вы, вероятно, найти себя изобретать многие из частей, которые составляют М.В.* структуры, как позвоночник или Ember.

Прежде всего, это не так уж трудно написать заявление рамки, которые предлагает some упрямый способ избежать спагетти кода, однако, сказать, что это столь же просто написать что-то стандартное магистральных будетгрубо неправильно assumption.

Там очень многое другое, что входит в структурировании применение, чем связывающая библиотеки DOM манипуляции, шаблонов и маршрутизации.Пожилые * MV рамки обычно включают не только много частей, которые Вы окажетесь записи, но также включают решения проблем, вы сможете найти себе работает в более поздние вниз по дороге.Это экономит время, что вы не должны недооценивать значение of.

Итак, где вы будете, вероятно, потребуется М.В. рамки * и где не так ли

Если вы пишете приложение, которое, скорее всего, только общаясь с API или фоновых данных услуг, где большая часть тяжелой работы для просмотра и манипулирования данными, что будет происходить в браузере, вы можете найти наличие М.В.* рамки useful.

Хорошие примеры приложений, которые попадают в эту категорию GMail и Google Docs.Эти приложения обычно скачивают одной полезной нагрузки, содержащий все сценарии, таблицы стилей и разметки, пользователям необходимо для выполнения общих задач, а затем выполнить много дополнительных поведения в фоновом режиме.Это тривиально, чтобы переключаться между чтением электронной почты или документов для написания одной и вам не нужно просить приложений для визуализации всей страницы снова в all.

Если, однако, вы создаете приложение, которое по-прежнему полагается на сервере для самых тяжелых-лифтинг Просмотров / страницы и вы используете только немного JavaScript или JQuery, чтобы сделать вещи немного более интерактивным, М.В.структура может быть излишним.Там, конечно, сложные веб-приложения, где частичной визуализации мнений может * использоваться в сочетании с одной страницы приложения эффективно, но для всего остального, вы можете найти себе лучшего прилипания к более простому setup.

Проблема выбора: слишком много вариантов

Сообщество JavaScript переживает что-то вроде ренессанса в течение последних нескольких лет, разработчиков, создающих даже более крупные и сложные приложения с ним, как проходит время.Язык по-прежнему сильно отличаетсяот тех, которые более классическое инженеров программного обеспечения привыкли использовать (C, Java), а также языки, используемые веб-разработчиков (PHP, Python,. Net и т.д.).Это означает, что во многих случаях мы занимаем понятия, как структурировать приложения от того, что мы видели в прошлом в этих других languages.

На мой разговор “ Дайджест JavaScript MVC: Злоупотребление Pattern или Evolution“, я поднял такой степени, что в настоящее время есть слишком большой выбор, когда дело доходит до того, чтобы использовать для структурирования приложений JavaScript.Часть этой проблемы подпитывается тем, как разные разработчики JavaScript интерпретировать как масштабируемое приложение JavaScript должен быть организован — MVC?MVP?MVVM?Что-то еще?Это приводит к более структур создается с различными взять на * MV каждую неделю, и в конечном итоге больше шума, потому что мы все еще пытаемся установить “правильный путь”, чтобы делать вещи, если вообще существует.Многие разработчики уверены, что это не

Мы говорим о текущем состоянии новых механизмов часто выскакивают как “Yet Another Framework синдром” (или YAFS).В то время как инновация, конечно, то, что мы должны приветствовать, YAFS может привести к большой путанице и разочарованию, когда разработчики просто хотят, чтобы начать писать приложения, но не хотите, чтобы вручную оценить 30 различных вариантов, чтобы выбрать что-то ремонтируется.Во многих случаях различия между некоторыми из этих структур может быть очень тонким, если не трудно distinguish.

TodoMVC: Общие приложений для обучения и Comparison

Там был огромный бум в число таких М.В. рамки * выпускается на протяжении последних нескольких years.

Backbone.js Ember.js AngularJS Spine CanJS … Список новых и устойчивых решений продолжает расти каждую неделю, и разработчики могут быстро найти себя потерялВ море вариантов.Из умов, которые должны были работать на сложных приложений, которые вдохновили эти решения (например, Иегуда Katz и Джереми Ashkenas), есть много сильных соперников за то, что разработчики должны рассмотреть вопрос об использовании.Вопрос в том, что использовать и как вы выбираете

Мы поняли это, разочарование и хотел помочь разработчикам упростить процесс выбора как можно больше.Чтобы помочь решить эту проблему, мы создали TodoMVC — проект, который предлагает те же приложения Todo реализована в большинстве популярных JavaScript М.В. * рамки сегодняшнего дня — думать о нем, как скорость знакомств для рамок.Решения выглядеть и чувствовать то же самое, имеют общий набор функций, и сделать его легким для нас, чтобы сравнить синтаксис и структуру различных рамок, поэтому мы можем выбрать тот, мы чувствуем себя наиболее комфортно или, по крайнейкрайней мере, сузить наши choices.

На этой неделе мы выпускаем брендом new версия TodoMVC, которые вы можете найти более подробную информацию о ниже в программах section.

В ближайшем будущем мы хотим сделать эту работу еще дальше, предоставляющий путеводители, о том, как структуры отличаются и рекомендации, по которым варианты для рассмотрения на конкретные типы приложений, которые вы, возможно, пожелают build.

Наши Предлагаемые критерии отбора Framework

Выбор рамки, конечно, нечто большее, чем просто сравнение реализаций Todo приложение.Именно поэтому, как только мы доходили наши отбора потенциальных рамок для нескольких, он рекомендовал, чтобы провести некоторое время, делая немного должной осмотрительности.Рамки мы выбираем, возможно, придется поддерживать строительство нетривиальные особенности и может в конечном итоге используются для поддержания приложения в течение многих лет come.

  • Какова структура действительно способны Потратьте время на рассмотрении как исходный код базы и официальный список возможностей, чтобы увидеть, насколько хорошо они соответствуют вашим требованиям.Там будут проекты, которые могут потребовать изменения или расширения базового источника и таким образом убедиться, что, если это может быть, вы выполнили должной осмотрительности на code.
  • ? Имеет рамках доказана в производстве т.е. есть разработчики фактически построены и развернуты большие приложения с ним, которые являются общедоступными?Магистральные имеет сильный портфель из них (SoundCloud, LinkedIn), но не все рамки делать.Ember используется в ряде крупных программах, в том числе инструменты пользователя в площади.JavaScriptMVC были использованы для питания приложений в IBM среди других местах.Это не только важно знать, что работает в рамках производства, но и быть в состоянии смотреть на реальный код мир и быть вдохновлен тем, что могут быть построены с it.
  • ? Является основой зрелых Мы рекомендуем разработчикам не просто “выбрать одного и идти с ним”.Новые проекты часто приходят с много шума вокруг их релизов, но не забудьте позаботиться при выборе их для использования на производстве на уровне приложений.Вы не хотите рисковать проектом, консервы, проходя через основные периоды реорганизации или другие критические изменения, которые имеют тенденцию быть более тщательно спланировано, когда основой является зрелым.Пожилые проекты также имеют тенденцию к более подробной документации, либо как часть своего должностного или общинных docs.
  • ? Является основой гибкой или самоуверенного Знайте, что аромат вы после этого, как Есть много структур, которые предоставляют одну или другую.Упрямый рамках заблокировать (или предложить) вам делать вещи определенным образом (их).По своей конструкции они ограничивают, но в меньшей внимание на разработчика того, чтобы выяснить, каквсе должно работать на их own.
  • ? Неужели вы играли с рамками Написать небольшое приложение без использования рамок, а затем пытаются реорганизовать свой код рамки для подтверждения того, что это легко работать или нет.Насколько исследований и чтения на код будет влиять на ваше решение, это столь же важно, чтобы написать фактический код, используя рамки, чтобы убедиться, что вы знакомы с концепциями его enforces.
  • ? Есть ли рамки имеют полный набор документации Хотя демо-приложения могут быть полезны для справки, вы почти всегда сможете найти себе консультаций с официальными рамки документы, чтобы выяснить, что ее поддерживает API, как общие задачи или компоненты могут быть созданы и какие подводные камни стоит отметить, есть.Любые рамки стоит его соль должна иметь подробный набор документации, который поможет руководства разработчиков, использующих его.Без этого, вы можете найти себя в значительной степени полагаются на IRC-каналах, группах и самопознания, которые могут быть прекрасны, но часто слишком много времени по сравнению с большим набором документов при условии, upfront.
  • Что такое общий размер рамки, факторинг в Минимизация, gzipping и любые модульные здания, что он поддерживает Что же зависимость рамки есть?Рамки, как правило, только перечислить общую Размер базовой самой библиотеки, но не перечислены размеры librarys зависимостей.Это может означать разницу между выбирают для библиотеки, которая изначально выглядит довольно небольшим, но может быть относительно большим, если он сказал, зависит от JQuery и другие libraries.
  • ? Ли Вы отзывы сообщество вокруг рамках Есть активное сообщество участников проекта и пользователей, которые могли бы помочь, если вы столкнетесь с проблемами?Иметь достаточно разработчики используют рамки, которые уже существуют ссылки приложений, учебники и даже видеоролики, которые можно использовать, чтобы узнать больше об этом

Dojo и повышение наличие Frameworks

Как многие из нас знают, Dojo toolkit была одна из первых попыток предоставить разработчикам средства для развития более сложных приложений, и некоторые могут сказать, что в части вдохновил нас больше думать о потребностях нетривиальныеприложений.Я сел спросить Додзе Dylan Schiemann, Китсон Келли и Джеймс Томас, что их мысли были на подъеме наличие М.В. * frameworks.

Q: Не Dojo уже решить все это?Почему это не было dominent решение для разработчиков, желающих построить более структурированным (и более нетривиальные) приложений ?

Много лет назад, в то время как пейзаж наличие превратился из простого добавления Ajax и хром на страницу, Dojo был евангелизации “инструментарий” подход к построению комплекса Web applications.

Многие из этих функций были далеко впереди большинства разработчиков потребности.С появлениемв браузере в качестве доминирующей платформой приложений, многие из нововведений, появившихся в Dojo Toolkit появиться в новых инструментальных средств.MVC был просто еще один пакет, который Dojo предоставила течение достаточно долгого времени, а также модульных пакетов кода, OO в JS, UI виджетов, кросс-браузерный графику, шаблоны, интернационализация, доступность, хранилищ данных, тестирование базы, системы сборки и многое,много more.

JavaScript библиотеки не должны заканчиваться на “запрос”, поэтому Dojo, на ранней стадии, сосредоточены на завершении картинку для корпоративного уровня для разработки приложений.Это тот же самый фокус, который сегодня с MVC, это просто еще один “инструмент в арсенале”

Почему Dojo не доминирующая инструментарий?Его цель никогда не была единственным выбором.Цель состояла в том, чтобы обеспечить открытый набор инструментов, которые могут быть использованы ни с чем, в рамках проектов, и либерально скопированы на другую работу, а также.Dojo был подвергнут критике за медлительность и даже после этого было адресовано, он был подвергнут критике за медлительность.Пытаясь избавиться том, что восприятие является сложной задачей.Это очень трудно для документирования многофункциональный инструментарий.Есть 175 суб-пакеты в Dojo 1.8 и более 1400 modules.

Это не только проблема с документацией цель, это также означает, что существует не одна вещь, которая делает Dojo.И это хорошо, если вы строите программного обеспечения, но очень трудно, когда вы начинаете пытается выяснить, с чего начать.Все эти вещи, которые мы пытались работать на протяжении Dojo 1.8, в виде учебных пособий и значительно улучшить documentation.

Q: Почему разработчики по-прежнему считают Dojo и какие идеи вы выстроили для будущего проекта?Я слышу 1,8 будет еще одним важным milestone.

В Dojo 1.8, DojoX / MVC делает еще один шаг на пути к полной зрелости.Там было много инвестиций в осознании времени, усилий, тестирование и сообщества в пакет.Она специализируется на предоставлении MVC модель, которая использует остальные Dojo.Вместе с DojoX / приложение, приложение базы, разработан, чтобы сделать его легче создавать приложения для настольных и мобильных, он делает целостной основы для созданияна стороне клиента application.

В типичным способом Dojo, это всего лишь одна из многих жизнеспособных путей для создания приложений с Dojo.

В 1,8, не только MVC суб-модуль стал более зрелым, он построен на прочную основу.Это не просто дать вам язык разметки для создания свое мнение, высказать свои модели или разработать контроллер.Это гораздо больше, чем просто проводки до некоторых элементов управления к источнику данных.Потому что используя остальные Dojo, можно нарисовать в чем еще вы могли бы need.

В Dojo 2.0 мы будет смотреть, чтобы принять модульности на новый уровень, так что она становится еще проще взять немного этого и немного, что и строка все это вместе.Мы также изучаем понятия изоморфизма, где она должна быть прозрачной для конечного пользователя, где ваш код выполняется, будь то клиентстороне или на стороне сервера и что в конечном счете она должна быть прозрачной для developer.

TodoMVC Collection

В наш новый релиз, Todo реализации уже существуют для наиболее популярных платформ с большим количеством других широко используемых структур ведутся работы в лабораториях.Эти реализации прошли через многое пересмотра, часто беря на борт лучшие практики советы и предложения от рамки авторов, участников и пользователей в community.

Исходя из ранее высказанных Backbone.js автор Jeremey Ashkenas и Иегуда Кац, TodoMVC теперь также предлагает последовательную реализацию на основе официальной спецификации приложений, а также маршрутизацию (или государственного управления)

Мы не претендуем, что более сложных приложений, обучение невозможно (они, конечно, есть), но простота Todo приложение позволяет разработчикам для рассмотрения таких областях, как структура кода, компоненты синтаксиса и потоков, которые мы считаем достаточно, чтобыпозволяет сравнение между рамками и быстрое дальнейшее исследование с особым раствором или набор solutions.

Наши приложения включают в себя:

Для тех, кто заинтересован в версии AMD:

И наша Labs включает:

Примечание: Мы реализовали версию нашего Todo приложение с помощью всего JavaScript и другое, используя в первую очередь JQuery conventions.Как вы можете видеть, в то время как эти приложения функционально эквивалентные то, что вы можете писать рамках MVC, нет никакого разделения интересов и код становится все труднее читать и поддерживать в качестве кодовой базы grows.

Мы считаем большой честью, что в прошлом году, некоторые рамки авторы участвуют с нами в дискуссии о том, как улучшить их решения, помогая принести наш опыт работы с множеством решений на стол.Кроме того, мы медленно двинулись к TodoMVC будучи почти приложений де-факто, что новые рамки реализации, и это означает, что он стал проще сделать начальную сравнения, когда вы просматриваете choices.

?

Рамки: когда использовать то, что

Чтобы помочь вам начать работу с сужая рамки, чтобы исследовать, мы хотели бы предложить ниже высоком уровне резюме рамках которых мы надеемся, поможет направить вас к несколько конкретных вариантов, чтобы попробовать out.

Я хочу что-то гибкое, который предлагает минималистский решения проблемы разделения в моем приложении.Она должна поддерживать сохранение слоя и RESTful синхронизации, модели, представления (с контроллером), управляемой событиями связь, шаблонов и маршрутизации.Он должен быть императив, позволяющий обновить Посмотреть при изменении модели.Я хотел бы несколько решений об архитектуре оставили до меня.В идеале, многие крупные компании используют решение для создания нетривиальных приложений.Как я могу что-то строить сложные, я бы хотел там быть активным сообществом расширение вокруг рамки, которые уже пытались решении больших задач ( Marionette Chaplin Aura Thorax).В идеале, есть и леса инструмент ( Грунт-bbb brunch) доступны для решения. Использование Backbone.js.

Я хочу то, что пытается решать рабочего стола на уровне разработки приложений для Интернета.Он должен быть самоуверенным, модульные, поддерживают изменение MVC, избежать необходимости провода все, что в моих приложений вместе вручную, поддержка настойчивость, компьютерная свойствами и имеют автоматическое обновление (Live) шаблоны.Она должна поддерживать надлежащее управление государством, а не ручной маршрутизации решение многих других структур выступают используется.Следует также поставляются с обширной документации и, конечно, шаблонов.Он также должен иметь инструменты, доступные леса (ember.gem, уголек для позднего завтрака). Использование Ember.js.

Я хочу что-то более легкое, которое поддерживает живую привязки шаблонов, маршрутизации, интеграцию с крупными библиотеками (например, JQuery и Dojo) и оптимизирован для работы.Следует также поддерживает способ реализации моделей, представлений и контроллеров.Оно не может быть использовано, как на многих крупных общественных приложений Пока еще нет, но есть потенциал.В идеале решение должно быть построено люди, которые имеют опыт создания многих сложных приложений. Использование CanJS.

Я хочу что-то декларативным, который использует View для получения поведения.Она сосредоточена на достижении этого через пользовательские теги HTML и компонентов, которые определяют ваши намерения приложений.Она должна поддерживать его легко проверяемые, URL управление (маршрутизация), а также разделение интересов через изменение MVC.Он использует другой подход для большинства структур, обеспечивающих HTML компилятор для создания собственного DSL в HTML.Это может быть вдохновлена ​​предстоящей веб-платформы функций, таких как веб-компоненты, а также имеет свой собственный инструмент лесов в наличии (угловой семян). Использование AngularJS.

Я хочу что-то, что предлагает мне отличную базу для создания больших приложений масштаба.Она должна поддерживать зрелые инфраструктуры виджетов, моду …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.