Google Web Toolkit и клиентская оптимизация
Чем медленнее загружается и работает web-приложение, тем меньше пользователей захотят им воспользоваться. Google понимает это как никто другой, поэтому в созданном ими Web Toolkit особое внимание уделено скорости работы получаемых с его помощью web-приложений.
Статья рассказывает о том, какие приемы клиентской оптимизации используются в GWT.
Отдельная версия приложения для каждого браузера
var xhr = new window. ActiveXObject ( «Microsoft.XMLHTTP» ) ;
var xhr = new window. XMLHttpRequest ( ) ;
Обычно (так устроено большинство JavaScript-библиотек) в подобных ситуациях в web-приложение включают все браузеро-зависимые реализации, а в каждом конкретном браузере используют только одну из них, выбирая её по ходу выполнения, то есть после того как будут загружены и разобраны в том числе и не нужные реализации.
В Google Web Toolkit применяют отличное (во всех смыслах) решение: для каждого браузера собирается отдельная версия web-приложения, называемая пермутацией. Каждая пермутация содержит всё, что необходимо для работы только в одном браузере, поэтому, например, «огненному лису» никогда не придется загружать и разбирать JavaScript или CSS специфичные для IE.
Оптимизация, минимизация и обфускация
Чтобы ускорить загрузку web-приложения, JavaScript и CSS обычно минимизируют, например, с помощью YUI Compressor, который за счет удаления пробельных символов и прочих необязательных конструкций, а также в результате обфускации, значительно сокращает их размер.
Google Web Toolkit также проводит минимизацию и обфускацию, но на вход минимизатора поступает JavaScript, не написанный человеком, а полученный в результате работы Java-в-JavaScript компилятора. Компилятор безопасно удаляет неиспользуемый код, разворачивает методы, оптимизирует полиморфные отношения, вычисляет константные выражения и делает многое другое, в результате чего получается оптимизированный (по размеру и по скорости работы) JavaScript.
Небольшой (примитивный) пример:
double a = CircleMath. getArea ( 7.5 ) ;
double c = CircleMath. getCircumference ( radius ) ;
Оптимизация для лучшего сжатия Gzip
Все современные браузеры поддерживают сжатие, которое (при правильной настройке web-сервера) позволяет значительно уменьшить размер передаваемых данных. Особенно хорошо сжимаются HTML, CSS и JavaScript, уменьшаясь в среднем на 75%.
Такие во многом зависящие от самих данных результаты показались инженерам Google неудовлетворительными, поэтому они модифицировали обфускатор, входящий в состав Google Web Toolkit так, чтобы получающийся на выходе обфусцированный код всегда сжимался Gzip как можно сильнее.
Чтобы представить, как это работает, сожмем с помощью GNU Gzip две строки:
a b c b a c a b c a b c b a c a b c
a a a a a a b b b b b b c c c c c c
Можно заметить, что обе строки состоят из одинакового числа одинаковых символов, а отличаются только порядком некоторых из них, при этом после сжатия первая строка не уменьшится ни на байт, тогда как вторая станет на 3 байта короче. Аналогичным образом, если поменять порядок объявления функций в JavaScript, так чтобы повторяющийся код, находился в рамках одного «скользящего окна», скрипт будет сжиматься сильнее, чем при случайном порядке объявления функций.
CSS sprites и встроенные изображения (data:URL)
CSS спрайты и встроенные изображения помогают уменьшить число обращений к серверу, необходимых для загрузки интерфейсной графики web-приложения. В большинстве случаев можно было бы ограничиться одними встроенными изображениями, но так как они не поддерживаются некоторыми все ещё широко-используемыми версиями IE, приходится применять обе методики.
Для построения интерфейса пользователя Google Web Toolkit позволяет использовать привычные технологии: HTML и CSS, несколько расширенный синтаксис которых помогает без каких-либо дополнительных усилий и знаний решить проблему обеспечения кросс-браузерной оптимизации загрузки изображений:
field = «image1» src = «1.png»/>
field = «image2» src = «2.png»/>
Во время сборки web-приложения, включающего такой UI-шаблон, 1.png и 2.png будут объединены в одно изображение, которое будет использовано в пермутациях для IE6 и IE7 посредством CSS Sprites. Во все остальные пермутации исходные изображения будут встроены в виде data:URL. В обоих случаях все необходимые свойства будут добавлены в CSS-классы image1 и image2 автоматически.
Разделение приложения на модули
Механизм пермутаций Google Web Toolkit, позволяет современным браузерам загрузить HTML, Javascript, CSS и изображения — всё компоненты web-приложения — в виде единого файла за одно обращение к серверу.
С ростом функциональности web-приложения неизбежно растет размер пермутаций, а соответственно увеличивается время необходимое для загрузки каждой из них. Может наступить момент, когда «холодный старт» (кэш браузера пуст), даже с учетом всех возможных оптимизаций, начнет занимать неприемлемо большое время.
На этот случай Google Web Toolkit предоставляет возможность разбить web-приложение на несколько отдельно-загружаемых модулей. Таким образом основные функции большого приложения можно сделать доступными для пользователя сразу после загрузки небольшого стартового модуля, а остальные, обеспечивающие дополнительную функциональность модули подгружать по мере надобности. Модули создаются и подгружаются автоматически, от разработчика требуется лишь указать точки разделения.
Используя модули, разработчики Google Wave смогли довести среднее время загрузки своего детища до нескольких секунд, хотя полный размер этого «монстра» равен примерно 3 Мбайтам.
Введение в GWT
[Disclaimer: Данная статья была переведена в рамках «Конкурса на лучший перевод статьи» на сервисе Quizful. Ссылка на оригинал находится внизу страницы.]
Что такое GWT?
Написание веб-приложений с использованием технологии AJAX (Асинхронный JavaScript и XML) для браузеров может оказаться очень утомительным занятием, которое требует глубокого знания как JavaScript, так и множества несоответствий различных браузеров. Google Web Toolkit (GWT) это Фреймворк с открытым исходным кодом, который позволяет Java разработчикам легко разрабатывать веб-приложения на AJAX без углубленного изучения JavaScript и браузерной разработки.
GWT предоставляет разработчику специальное Java API и позволяет разрабатывать компонентно-ориентированные графические пользовательские интерфейсы (GUI), избегая работы с JavaScript и абстрагируясь от протокола HTTP и DOM моделей, лежащих в основе браузеров. Все это достигается использованием GWT компилятора, который не генерирует Java байт-код, точнее он генерирует JavaScript! GWT компилятор берет клиентский Java код и генерирует JavaScript. Скомпилированное GWT приложение состоит из фрагментов HTML, XML и JavaScript. Если вы хотите, чтобы ваше веб-приложение соединялось с веб-сервером, GWT и здесь вам поможет. В арсенале GWT есть Remote Procedure Call (RPC) – механизм удаленного вызова процедур, который осуществляет простой обмен Java-объектами между клиентом и сервером в обе стороны.
GWT также позволяет разработчикам эффективно тестировать и отлаживать приложения без необходимости преобразования приложений в JavaScript и развертывания их на веб-сервере. GWT позволяет приложениям быть запущена в так называемом «Хостинг режиме»(“Hosted Mode”). В «Хостинг режиме» JVM исполняет код вашего GWT приложения в виде Java байт-кода внутри встроенного браузера. Запуск GWT приложений в «Хостинг режиме» делает отладку вашего GWT приложения очень простой. После того, как Вы проверили ваши GWT приложений в «Хостинг режиме», вы можете скомпилировать исходный код Java в JavaScript и развернуть ваше приложение. GWT приложения, которые были развернуты, называются запущенными в «Веб-режиме»(“Web Mode”).
Итак, короче говоря, вы пишите клиентскую и серверную части своего приложения на Java, и тогда GWT компилятор превратит ваши клиентские Java классы в совместимые с браузером JavaScript и HTML. После чего вы можете развернуть эти JavaScript и HTML на ваших веб-серверах, так что конечные пользователи будут видеть только веб-версию вашего приложения, в то время как классы серверной стороны могут быть развернуты на Tomcat или на любом сервлет-контейнере по вашему выбору.
Справочные материалы
Для получения дополнительной информации о GWT, получения ресурсов, инструментов, библиотек, которые вы можете использовать в ваших проектах, посетите Неофициальную страницу Google Wiki посвещенную GWT. На ней содержится список плагинов, которые доступны для различных IDE, присутствуют множество виджетов / GWT компонентов, которые можно использовать в ваших проектах. Страница также содержит ссылки на такие проекты, как MyGWT и GWT-EXT, которые позволяют произвести интеграцию с EXT JavaScript библиотеками. Вы можете также найти ссылки на библиотеку журналов GWT (GWT log library), drag-and-drop библиотеку (drag and drop library) и музыкальную библиотеку GWT (GWT sound library).
GWT Primer – вещи, которые необходимо знать перед началом работы
Поддержка браузеров GWT
По состоянию на GWT версии 1.4, GWT поддерживае следующие браузеры:
GWT Компилятор
В GWT компилятор преобразует исходный код Java в JavaScript. В GWT компилятор поддерживает большую часть возможностей языка Java и эмулирует их в Java Runtime Library.
Языковая поддержка
По состоянию на GWT версии 1.4, GWT компилятор может компилировать исходный код, совместимый с J2SE 1.4.2 или старше.
Эмуляция Библиотек времени выполнения (Runtime Library Emulation)
GWT предоставляет библиотеку эмулирующую JRE. Эта библиотека НЕ эмулирует все J2SE и J2EE классы. GWT эмулятор JRE поддерживает только некоторые классы из java.lang и java.util пакетов. Узнать, какие классы поддерживаются, можно в JRE Emulation Reference Manual.
Регулярные выражения Java не полностью поддерживается в GWT. Если вы собираетесь использовать регулярные выражения в GWT приложениях, нужно, чтобы вы использовали только тот синтаксис Java регулярных выражений, который используется в JavaScript.
GWT эмулятор JRE не поддерживает Java сериализации. Ему в замен, однако, в GWT имеется RPC средства, которые обеспечивают автоматическую сериализацию объектов. Эти RPC средства позволяют коду на стороне клиента создать удаленный метод для передачи сериализованных объектов в качестве параметров.
Клиентский код
GWT веб-приложения состоят из двух отдельных частей. Часть вашего приложения, которое отправляется по сети к пользователю, где оно работает, как JavaScript внутри веб-браузера, называется клиентской код. При написании клиентского кода важно иметь в виду, что этот код будет в конечном итоге превращаться в JavaScript. Поэтому убедитесь, что используете библиотеки и языковыхе конструкции, которые могут быть переведены на javascript.
Серверный код
Часть вашего приложения, которое работает на сервере, называется серверный код. Вашему GWT приложению, для взаимодействия с сервером, возможно, потребуется, например, загрузить или сохранить часть данных. Для того чтобы сделать это, приложение делает запрос к клиентскому коду (в браузере) с RPC механизма GWT. Пока обрабатывается RPC запрос, серверный код начинает выполняться выполняется. В GWT, компиляция клиентского кода не зависит от серверного кода. Как результат, на стороне сервера код не имеет каких-либо ограничений, которые налагаются на стороне клиента. В результате ваш серверный код не имеет, каких либо ограничений которые налогаются на клиентскую часть и следовательно вы свободны в выборе технологии кото he. Вы будете использовать в вашем серверном коде.
Отложенное связывание (Deferred Binding)
Отложенное связывание является одним из ключевых элементов. Оно позволяет GWT производить хорошо оптимизированный код JavaScript. Как вы видели ранее, GWT компилятор не поддерживает Java Reflection или динамическую загрузку классов (также называемую динамическим связыванием). Это происходит потому, что JavaScript среда, в которой GWT приложение будет запущенно, не поддерживает его. Ввиду невозможности динамичного связывания в GWT, вместо него используется так называемые отложенное связывание (deffered binding). Отложенное связывание похоже на динамическую загрузку классов. В то время как динамическая загрузка класса происходит во время выполнения, отложенное связывание происходит во время компиляции.
Когда GWT компилятор компилирует ваш клиентский код, он определяет различные «особенности браузера», которые должен поддерживать, и генерирует оптимизированный вариант приложения для каждой конкретной конфигурации. Поэтому через некоторое время у вас будут самые различные версии вашего приложения для каждого из поддерживаемых браузеров. Но отложенное связывание это нечто большее, чем просто мультибраузерная поддержка.
Хороший пример того, где отложенное связывание может быть полезным является мульти-языковая поддержка. GWT Компилятор использует отложенное связывание для создания совершенно разных версий вашего приложения для каждого языка. Таким образом, если GWT поддерживает 4-браузера, и вы напишите ваше приложение на 4 языках, GWT будет генерировать 16 различных подстановок вашего приложения во время компиляции. Во время запуска и выполнения, GWT выбирает подходящую версию вашего приложения и показывает его пользователю.
GWT загрузка (Bootstrapping)
Ниже приведен обзор процедуры загрузки для GWT приложений:
GWT.Начинающим на заметку
Добрый день дамы и господа,
Эта статья предназначена в первую очередь начинающим и навряд ли принесет какую либо пользу людям бывалым. Но было бы неплохо, если бы люди с опытом привели бы парочку полезных ссылок в комментариях.
Итак, знакомство я советую начать с демо. Тогда вы сможете себе представить, а что GWT вообще может и какие виджеты доступны прямо из коробки. GWT безусловно весьма сильный Фреймворк, но его чуть ли не самая главная беда заключается как раз в том, что этих самых виджетов не так уж и много. Но эта не беда, т.к. есть много различных библиотек, которые эту проблему решают. Особый расцвет пришелся на время 2-3 года назад, когда много чего в GWT просто не было и явных фаворитов среди сторонних библиотек тоже не было заметно. Сейчас ситуация довольно сильно изменилась. Поэтому если вам нужен какой нибудь продвинутый виджет, то советую обратить внимание на SmartGWT и Ext-GWT.
SmartGWT имеет целую кучу виджетов на все случаи жизни. Смотрите сами. Обратите внимание на таблицы, что еще можно желать? Если вам все таки чего то не хватает, то виджет вы можете допилить. У библиотеки есть весьма живой форум, если у вас возникла проблема, ищите там. Я находил ответы на все мои вопросы. Не найдете, спрашивайте сами, обычно отвечают весьма оперативно. У библиотеки есть даже своя IDE, правда я ей не пользовался. О том что библиотека весьма популярна говорит и тот факт, что в плагине WindowBuilder к Эклипсе есть возможность накликать GUI из виджетов SmartGWT. У библиотеки есть большой, на мой взгляд, недостаток: вы напишите маленькую программку с одной единственной таблицей и размер этой программки станет сразу под 2 мегабайта. Т.е. написать сайт на SmartGWT конечно получится, но кто будет ждать пока он загрузится? Именно поэтому я написал этот сайт на «чистом» GWT. Но для разных вебморд для банков данных и сервисов, которыми пользуются в основном по локалке, эта библиотека первый кандидат на рассмотрение.
Если по какой то причине SmartGWT вас не устроила, обратите внимание на GWT-Ext и GXT. С ними я не работал, так что ничего сказать не могу, но выглядит не плохо.
Если же вы решили таки обойтись «чистым» GWT я рекомендую вам посмотреть вот это. Кроме того посмотрите на вот эти интересные демки. Когда я это увидел я был просто в восторге, это же jQuery для GWT! Теперь можно делать весьма приятные анимационные эффекты буквально парой строчек.
Ну а под конец несколько моментов, которые полезно знать.
На сервере не обязательно должна крутится ява. Там может быть практически все что угодно, в том числе и PHP. А может и вообще ничего не быть, если страница не «разговаривает» сервером. Вот посмотрите: раз, два. Эту штуку я сделал для предмета «E-Learning». Страницы полностью статические, в том смысле, что после загрузки сервер им не нужен.
Из GWT можно вызывать функции написанные на чистом JavaScripte. Делается это элементарно, пишите, что функция нативная и пишите там JavaScript. Здесь это весьма подробно объяснено.
Это значит, что вы можете использовать в своем GWT проекте любую чисто JavaScript‘овскую библиотеку( вот тут правда я не очень уверен, если что поправьте). Если вы хотите вытащить из JavaScripta значение какой либо переменной посмотрите в сторону класса Dictionary.
Можно и наоборот, написать логику на GWT, а потом вызывать ее в JavaScripte. Здесь описано как это делается.
Как то я даже находил в сети маленькую библиотеку, которая автоматизирует этот процесс.
Практически у каждого виджета есть статичный метод wrap(). Например если у вас есть див на статичной странице и вы хотите динамично изменять его содержимое, то вы просто пишите:
где «А» это id вашего дива. Просто, не так ли?
Не все явовские классы имеют свои аналоги в GWT. Например класс Thread использовать не получится, что понятно, т.к. в JavaScripte многопоточность в этом смысле не реализована(пока).
Ваши дополнения интересных библиотек и фичь приветствуются!
Фреймворк GWT
Google Web Toolkit (GWT) — это свободный Java фреймворк, позволяющий создавать Ajax-приложения. Основной особенностью GWT является компилятор Java, конвертирующий искодный код в JavaScript. Web-программисты в основном всю разработку клиентской и серверной частей приложения реализовывают с использованием Java и лишь на последнем этапе осуществляют конвертацию исходных кодов в соответствующий JavaScript.
GWT включает XML парсер, поддерживает интернационализацию, имеет интерфейс удаленного вызова процедур, интегрирован с JUnit и имеет небольшой пакет виджетов для разработки элементов графического интерфейса пользователя (GUI). Виджеты могут быть созданы аналогично тому, как это делается с помощью библиотеки Swing.
Структура проекта GWT-приложения включает серверную и клиентскую части. Отладка серверной части приложения осуществляется как отладка обычного Java web-приложения. Для отладки клиентской части необходимо дополнительно устанавливать GWT Developer Plugin для браузера.
Для создания структуры нового GWT-приложения фреймворк включает утилиту командной строки webAppCreator, которая автоматически создает все файлы проекта. Для IDE Eclipse (начиная с версии 3.3) существует подключаемый модуль Google Plugin, существенно упрощающий процессы создания GWT-проекта и размещения готовых приложений на сервисе Google App Engine.
GWT предлагает небольшой набор графических виджетов для разработки интерфейса клиентской части приложения. Дополнительные виджеты можно подключить, используя одну из сторонних библиотек типа ExtGWT (GXT), SmartGWT.
Фреймворк GWT включает :
Инсталляция GWT в IDE Eclipse
Для начала работы с GWT-проектом необходимо установить в IDE Eclipse плагины GPE, GWT SDK и GWT Designer. Для этого в среде Eclipse (http://www.eclipse.org/downloads/) в меню Help выберем команду «Install New Software», нажмем кнопку «Add» поля «Work with» и введем адрес инсталляции плагины Google для Eclipse. Адреса плагинов Google можно найти на странице https://developers.google.com/eclipse/docs/download?hl=ru-RU.
Eclipse загрузит в интерфейс окна доступные плагины. Необходимо отметить флажки GWT-плагинов и нажать кнопку Next. На следующем шаге Eclipse представит все компоненты, которые будут установлены в среде разработки.
Далее необходимо согласиться с условиями лицензии, после чего компоненты GWT будут установлены в Eclipse.
После перезагрузки IDE в панели инструментов мы увидим дополнительные пункты меню для GWT проекта.
Инсталляция плагина «GWT Developer Plugin» в браузере
На этом можно сказать, что установка плагина фреймворка GWT в среду Eclipse завершена. Можно переходить к разработке. Однако необходимо пару слов сказать о браузере. Лучше, конечно, для отладки GWT-приложения использовать родной Google Chrome, хотя можно и любой другой. Предыдущие версии GWT требовали дополнительной установки плагина в браузере, GWT Developer Plugin. Для разных браузеров использовался свой плагин. Проявлялось это при первом открытии GWT-приложения в браузере в виде следующей страницы.
С использованием GWT SDK версии 2.6 можно плагин GWT Developer Plugin в браузере не устанавливать. Для этого достаточно стартовать приложение в режиме «Super Dev Mode», как это представлено на следующем скриншоте.
Отложенное связывание, Deferred Binding
Отложенное связывание (Deferred Binding) является одним из важных элементов фреймворка. Оно позволяет GWT формировать хорошо оптимизированный код JavaScript. Следует отметить, что GWT компилятор не поддерживает java reflection или динамическую загрузку классов, также называемую динамическим связыванием. Связано это с тем, что JavaScript среда, в которой GWT приложение будет функционировать, не поддерживает это. Ввиду невозможности динамичного связывания в GWT, вместо него используется так называемые отложенное связывание Deffered Binding. Отложенное связывание похоже на динамическую загрузку классов. Если динамическая загрузка класса происходит во время выполнения приложения, то отложенное связывание происходит во время компиляции.
Во время компиляции клиентского кода GWT приложения компилятор определяет «особенности браузера», которые код должен поддерживать, и генерирует оптимизированный вариант приложения для каждой конкретной конфигурации. Поэтому при правильной настройке файла конфигурации можно получить различные версии приложения для каждого из поддерживаемых браузеров. Но отложенное связывание это нечто большее, чем просто мультибраузерная поддержка.
Хороший пример того, где отложенное связывание может быть полезным является мультиязыковая поддержка. GWT компилятор использует Deferred Binding для создания совершенно разных версий приложения для каждого языка. Таким образом, если GWT поддерживает 4 типа разных браузера и в файле конфигурации приложения будет определено 4 языка, то GWT компилятор будет генерировать 16 различных реализаций. Во время запуска и выполнения, GWT выбирает подходящую версию приложения для браузера.
Отложенное связывание имеет несколько преимуществ :
Особенности GWT-проекта
В GWT-проекте необходимо учитывать особенности использования ресурсных файлов изображений и сообщений, временных зон TimeZone, описанных здесь.
СОДЕРЖАНИЕ
История
GWT версии 1.0 RC 1 был выпущен 16 мая 2006 года. Google анонсировал GWT на конференции JavaOne в 2006 году.
| Релиз | Дата |
|---|---|
| GWT 1.0 | 17 мая 2006 г. |
| GWT 1.1 | 11 августа 2006 г. |
| GWT 1.2 | 16 ноября 2006 г. |
| GWT 1.3 | 5 февраля 2007 г. |
| GWT 1.4 | 28 августа 2007 г. |
| GWT 1.5 | 27 августа 2008 г. |
| GWT 1.6 | 7 апреля 2009 г. |
| GWT 1.7 | 13 июля 2009 г. |
| GWT 2.0 | 8 декабря 2009 г. |
| GWT 2.1.0 | 19 октября 2010 г. |
| GWT 2.2.0 | 11 февраля 2011 г. |
| GWT 2.3.0 | 3 мая 2011 г. |
| GWT 2.4.0 | 8 сентября 2011 г. |
| GWT 2.5.0 | Октябрь 2012 г. |
| GWT 2.5.1 | Март 2013 г. |
| GWT 2.6.0 | 30 января 2014 г. |
| GWT 2.6.1 | 10 мая 2014 г. |
| GWT 2.7.0 | 20 ноября 2014 г. |
| GWT 2.8.0 | 20 октября 2016 г. |
| GWT 2.8.1 | 24 апреля 2017 г. |
| GWT 2.8.2 | 19 октября 2017 г. |
| GWT 2.9.0 | 2 мая, 2020 |
В 2012 году на своей ежегодной конференции ввода-вывода Google объявил, что GWT будет преобразован из проекта Google в проект с полностью открытым исходным кодом. В июле 2013 года Google опубликовал в своем блоге GWT сообщение о завершении преобразования в проект с открытым исходным кодом.
Разработка с GWT
Используя GWT, разработчики могут разрабатывать и отлаживать приложения Ajax на языке Java, используя инструменты разработки Java по своему выбору. Когда приложение развернуто, кросс-компилятор GWT переводит приложение Java в автономные файлы JavaScript, которые могут быть запутаны и глубоко оптимизированы. При необходимости JavaScript также может быть встроен непосредственно в код Java с использованием комментариев Java.
GWT не вращается только вокруг программирования пользовательского интерфейса; это общий набор инструментов для создания любых высокопроизводительных клиентских функций JavaScript. Действительно, многие ключевые архитектурные решения полностью оставлены на усмотрение разработчика. Заявление о миссии GWT разъясняет философское разделение роли GWT и роли разработчика. Примером является история: хотя GWT управляет токенами истории, когда пользователи нажимают «Назад» или «Вперед» в браузере, он не предписывает, как отображать токены истории в состояние приложения.
Приложения GWT могут работать в двух режимах:
Составные части
Основные компоненты GWT включают:
Функции
Доступные виджеты
Начиная с версии 2.4 (сентябрь 2011 г.), GWT предлагает несколько виджетов и панелей.
| Виджеты | Панели |
|---|---|
| Кнопка | PopupPanel |
| Нажать кнопку | StackPanel |
| Переключатель | StackLayoutPanel |
| CheckBox | Горизонтальная панель |
| DatePicker | Вертикальная панель |
| Кнопка-переключатель | FlowPanel |
| Текстовое окно | VerticalSplitPanel |
| PasswordTextBox | HorizontalSplitPanel |
| TextArea | SplitLayoutPanel |
| Гиперссылка | ДокПанель |
| ListBox | DockLayoutPanel |
| CellList | TabPanel |
| Строка меню | TabLayoutPanel |
| Дерево | DisclosurePanel |
| CellTree | |
| SuggestBox | |
| RichTextArea | |
| FlexTable | |
| Сетка | |
| CellTable | |
| CellBrowser | |
| TabBar | |
| Чат |
Многие общие виджеты, которых нет в GWT, были реализованы в сторонних библиотеках.
Использование на предприятии
GWT 2.0
8 декабря 2009 года Google запустил Google Web Toolkit 2.0 с Speed Tracer.
Версия 2.0 GWT предлагает ряд новых функций, в том числе:
Поскольку в новом режиме разработки была удалена большая часть кода, зависящего от платформы, новая версия будет распространяться в виде уникального архива, а не по одному для каждой поддерживаемой платформы, как это было в предыдущих версиях.
Мобильный
В качестве общей основы для создания веб-приложений GWT также может использоваться в качестве основы для создания приложений для мобильных устройств и планшетов, создавая необходимые виджеты и анимацию с нуля или используя одну из мобильных платформ для GWT. Приложение HTML5, написанное на GWT, может иметь отдельные представления для планшетов и мобильных телефонов.
