Создавайте насыщенные интернет-приложения с Ext

Ext (доступно на extjs.com ) — это среда разработки JavaScript, созданная и поддерживаемая уважаемым гуру JavaScript Джеком Слокумом. Предоставляя постоянно растущую структуру классов JavaScript, которые решают многие распространенные проблемы, связанные с разработкой многофункциональных интернет-приложений (RIA) на JavaScript, Ext может потенциально сэкономить вам месяцы работы над попытками создания веб-приложения.

В этой статье я подробно расскажу о том, что такое Ext на самом деле и чем занимается. Почему, как мне кажется, мы, веб-разработчики, нуждаемся в нем, и как это значительно облегчает разработку RIA. Мы ответим на вопросы: что такое Ext на самом деле? И зачем нам это?

Определение «Богатого интернет-приложения»

Точно так же, как вы знаете, в этой статье я сознательно выбрал опускание широко известных (и раскрученных) терминов «Ajax» и «Web 2.0», поскольку, на мой взгляд, все еще существует некоторая путаница в отношении того, за что они действительно выступают. , Однако определение «богатое применение» является общепринятым. Этот термин определяет приложение с функционально богатым пользовательским интерфейсом — приложение, такое же отзывчивое и интеллектуальное, как любое из настольных приложений, которые мы используем ежедневно. Adobe Photoshop и Microsoft Excel (показанные ниже) являются хорошими примерами многофункциональных приложений для настольных компьютеров.

Итак, зачем нам тогда RIA? У нас уже есть все необходимые приложения прямо на наших рабочих столах, верно? Что ж, хотя это действительно так, все больше и больше компаний принимают концепцию RIA, заменяя свои традиционные настольные приложения сетевыми аналогами. Самым очевидным преимуществом этого подхода является, конечно, то, что ваши потенциальные клиенты могут получить полный доступ к вашему приложению, где бы они ни имели доступ к веб-браузеру и интернет-соединению. Для клиентов, использующих приложение, которое не только разработано, но и управляется и управляется третьей стороной, ответственность за эксплуатацию критически важных приложений переходит к внешней стороне, которая может высвободить внутренние ресурсы.

Распространение приложений через Интернет подпадает под концепцию SaaS (Программное обеспечение как услуга), которая стала одной из самых горячих тем в отрасли за последние несколько лет. Внедрение SaaS уже широко распространено в Северной Америке, и некоторые ожидают, что это произойдет в Европе очень скоро .

Концепции SaaS и RIA тесно связаны между собой: потенциальный успех SaaS, естественно, зависит от потенциала рынка по созданию хороших веб-приложений: люди не захотят отказаться от своего традиционного программного обеспечения, если альтернативы на основе Интернета не окажутся одинаково хорошими. Чтобы создавать веб-приложения, которые могут конкурировать с традиционными настольными приложениями, нам нужно добавить еще одно измерение в традиционно статичный веб. Вот где Ext входит в картину. Но сначала давайте посмотрим на проблемы, с которыми разработчики традиционно боролись при разработке RIA.

Разработка многофункциональных интернет-приложений

RIA может быть разработан с использованием нескольких различных методов: Java-апплеты, Flash и Microsoft XBAP — это технологии, которые могут служить платформой. Тем не менее, метод, который получил наибольшее распространение и фактически стал стандартом де-факто, — это JavaScript. Используя JavaScript для динамического изменения HTML и CSS, загруженного в браузер пользователя, разработчики нашли способ создавать веб-сайты, которые выглядят и выглядят как настоящие приложения, и обладают всеми преимуществами HTML-доступа и SEO.

Но такой подход не лишен недостатков: большая часть пользовательского интерфейса должна создаваться с нуля. Например, при разработке настольного приложения Windows с использованием Windows Forms у вас есть предопределенный набор виджетов, которые автоматически генерируют красивые таблицы, деревья, диалоги, контекстные меню, панели инструментов и т. Д. Ни один из этих виджетов не существует в JavaScript. В конце концов, JavaScript и CSS лежат на довольно низком техническом уровне, и поэтому программирование продвинутых пользовательских интерфейсов с нуля с использованием этих методов является довольно сложным или, по крайней мере, очень громоздким.

Конечно, многие примеры вышеупомянутых строительных блоков уже существуют, распределены по различным сайтам в Интернете в качестве примеров кода или даже свободного программного обеспечения. Поэтому, если вы приложите некоторые усилия, вы можете просто найти рабочие версии или, по крайней мере, примеры кода, для большинства строительных блоков, необходимых для создания RIA. Проблема заключается в том, что эти примеры кода разбросаны по всему Интернету и различаются как по качеству, так и по стилю. Сбор кода JavaScript и использование того, что вы найдете в качестве основы для своего приложения, может сэкономить вам много времени на разработку, если сравнить этот подход с выполнением всего с нуля. Но это, вероятно, также потребовало бы, чтобы вы изменили большую часть кода, который вы нашли, чтобы добиться согласованного внешнего вида. Кроме того, у вас не было бы никаких гарантий, что вы будете получать обновления или исправления ошибок, что сделало бы этот подход менее чем идеальным.

Если мы хотим легко разработать унифицированную, профессионально выглядящую, простую в использовании и стабильную RIA, нам, очевидно, придется преодолеть несколько проблем.

Ext приходит на помощь

В двух словах, Ext предоставляет именно то, что нам нужно — стабильную и унифицированную платформу JavaScript для создания многофункциональных веб-приложений. Первоначально построен на Yahoo! Библиотека пользовательского интерфейса Ext выглядит довольно многообещающе в течение некоторого времени. Однако когда на прошлой неделе была выпущена версия 2.0, библиотека превратилась, возможно, в самую надежную библиотеку JavaScript, доступную для разработки многофункциональных веб-пользовательских интерфейсов.

Конечно, есть несколько альтернатив, таких как Dojo и Yahoo! Библиотека пользовательского интерфейса, но есть несколько ключевых моментов, которые при объединении выделяют Ext из толпы. Эти пункты включают в себя:

• Ext очень быстрый. Производительность часто является проблемой при программировании JavaScript.
• Ext реализован на 100% объектно-ориентированной, хорошо структурированной, согласованной образом. Это позволяет быстро изучать библиотеку, а код легко читать и понимать.
• Модульная реализация с ее последовательной базой позволяет легко расширять библиотеку.
• Все элементы Ext (виджеты) готовы к использованию. В отличие от многих других библиотек, виджеты можно использовать как есть, с предопределенными стилями, настройками и поведением. Тем не менее, все элементы полностью настраиваемы и могут быть тематическими при необходимости.
• Разработчики Ext чрезвычайно преданы своему делу и компетентны, и понимают, а главное заинтересованы в потребностях пользователей. Документация по Ext полна и полна рабочих примеров.
• Сообщество Ext очень активно, и тон, как правило, очень позитивный.
• Ext может использоваться как по бесплатной, так и по коммерческой лицензии.
• Не в последнюю очередь, Ext выглядит очень гладко!

Частично (или, может быть, даже все) это верно и для других библиотек. Я не претендую на то, что других превосходных альтернатив не существует, и вы должны изучить все варианты, прежде чем принять решение о его выборе. Однако, по моему опыту, Ext дает наилучшее общее впечатление, поэтому я решил использовать его.

<html>  

  <head>  

    <title>Fading without Ext</title>  

  </head>  

  <body>  

    <div  

      id="my-element-to-fade"  

      style="width:100px;height:100px;background-color:Red">  

    </div>  

    <br />  

    <button onclick="shiftOpacity('my-element-to-fade', 1000);">  

      Fade!  

    </button>  

          

    <script type="text/javascript">  

      function changeOpacity(opacity, id)  

      {   

        var object = document.getElementById(id).style;   

        object.opacity = (opacity / 100);  

        object.MozOpacity = (opacity / 100);   

        object.KhtmlOpacity = (opacity / 100);   

        object.filter = "alpha(opacity=" + opacity + ")";   

      }  

          

      function setOpacity(id, opStart, opEnd, ms)  

      {              

        var speed = Math.round(ms / 100);   

        var timer = 0;   

  

        if(opStart > opEnd)  

        {   

          for(i = opStart; i >= opEnd; i--)  

          {   

          setTimeout(  

            "changeOpacity(" + i + ",'" + id + "')",  

            (timer * speed)  

          );   

            timer++;   

          }  

        }   

        else if(opStart < opEnd)  

        {   

          for(i = opStart; i <= opEnd; i++)   

          {  

            setTimeout(  

              "changeOpacity(" + i + ",'" + id + "')",  

              (timer * speed)  

            );   

            timer++;  

          }  

        }  

      }  

              

      function shiftOpacity(id, ms)  

        {  

          if(document.getElementById(id).style.opacity == 0)  

          {  

            setOpacity(id, 0, 100, ms);   

          }  

          else  

          {  

            setOpacity(id, 100, 0, ms);   

          }  

        }  

    </script>  

  </body>  

</html>

 <html>  

  <head>  

    <title>Fading with Ext</ title>  

    <script  

      type="text/javascript"  

      src="ext/adapter/prototype/prototype.js">  

    </script>  

    <script  

      type="text/javascript"  

      src="ext/adapter/prototype/scriptaculous.js?load=effects">  

    </script>  

    <script  

      type="text/javascript"  

      src="ext/adapter/prototype/ext-prototype-adapter.js">  

    </script>  

    <script  

      type="text/javascript"  

      src="ext/ext-all.js">  

    </script>  

  </head>  

  <body>  

    <div  

      id="my-element-to-fade"  

      style="width:100px;height:100px;background-color:Red;">  

    </div>  

    <button onclick="showHide('my-element-to-fade');" style="margin-top: 10px;">  

      Fade!  

    </button>  

    <script type="text/javascript">  

      function showHide(id)  

      {  

        Ext.get(id).toggle(true);  

      }  

    </script>  

  </body>  

</html>