¿Los mayores obstáculos de GWT?[cerrado]

StackOverflow https://stackoverflow.com/questions/99866

  •  01-07-2019
  •  | 
  •  

Pregunta

Estoy al principio/en la mitad de un proyecto que elegimos implementar usando GWT.¿Alguien ha encontrado obstáculos importantes al usar GWT (y GWT-EXT) que no se pudieron superar?¿Qué tal desde una perspectiva de rendimiento?

Un par de cosas que ya hemos visto/escuchado incluyen:

  • Google no puede indexar contenido
  • CSS y el estilo en general parecen un poco inestables

También espero comentarios adicionales sobre estos elementos.¡Gracias!

¿Fue útil?

Solución

Comenzaré diciendo que soy un gran fanático de GWT, pero sí, hay muchos obstáculos, pero la mayoría, si no todos, pudimos superar:

Problema: Tiempos de compilación largos: a medida que su proyecto crece, también aumenta la cantidad de tiempo que lleva compilarlo.He oído hablar de informes de compilaciones de 20 minutos, pero las mías duran en promedio aproximadamente 1 minuto.

Solución: Divida su código en módulos separados y dígale a Ant que solo lo cree cuando haya cambiado.Además, mientras desarrolla, puede acelerar enormemente los tiempos de compilación compilando solo para un navegador.Puedes hacer esto poniendo esto en tu archivo .gwt.xml:

<set-property name="user.agent" value="gecko1_8" />

Donde gecko1_8 es Firefox 2+, ie6 es IE, etc.

Problema: El modo alojado es muy lento (al menos en OS X) y no se acerca a los cambios "en vivo" que obtienes cuando editas cosas como páginas JSP o Rails y presionas actualizar en tu navegador.

Solución: Puedes darle más memoria al modo alojado (generalmente obtuve 512M), pero aún así es lento. Descubrí que una vez que eres lo suficientemente bueno con GWT, dejas de usarlo.Realiza una gran cantidad de cambios, luego compila para un solo navegador (generalmente 20 compilaciones) y luego simplemente presiona actualizar en su navegador.

Actualizar:Con GWT 2.0+ esto ya no es un problema, porque utiliza el nuevo 'Modo de desarrollo'.Básicamente significa que puede ejecutar el código directamente en el navegador de su elección, por lo que no hay pérdida de velocidad, además puede activarlo/inspeccionarlo, etc.

http://code.google.com/p/google-web-toolkit/wiki/UsingOOPHM

Problema: El código GWT es Java y tiene una mentalidad diferente a la de diseñar una página HTML, lo que hace que tomar un diseño HTML y convertirlo en GWT sea más difícil.

Solución: Una vez más, te acostumbras a esto, pero desafortunadamente convertir un diseño HTML a un diseño GWT siempre será más lento que hacer algo como convertir un diseño HTML a una página JSP.

Problema: GWT requiere un poco de comprensión y aún no es popular.Lo que significa que la mayoría de los desarrolladores que se unan a su equipo o mantengan su código tendrán que aprenderlo desde cero.

Solución: Queda por ver si GWT despegará, pero si eres una empresa que controla a quién contratas, siempre puedes elegir personas que conozcan GWT o quieran aprenderlo.

Problema: GWT es un mazo comparado con algo como jquery o simplemente javascript.Se necesita mucha más configuración para que esto suceda que simplemente incluir un archivo JS.

Solución: Utilice bibliotecas como jquery para tareas más pequeñas y sencillas que se adapten a ellas.Utilice GWT cuando desee crear algo realmente complejo en AJAX, o cuando necesite pasar sus datos de un lado a otro a través del mecanismo RPC.

Problema: A veces, para completar su página GWT, necesita realizar una llamada al servidor cuando la página se carga por primera vez.Puede resultar molesto para el usuario sentarse allí y mirar un símbolo de carga mientras busca los datos que necesita.

Solución: En el caso de una página JSP, su página ya fue procesada por el servidor antes de convertirse en HTML, por lo que puede realizar todas sus llamadas GWT en ese momento y precargarlas en la página para una carga instantánea.Consulte aquí para obtener más detalles:

Acelere la carga de la página preseriando sus llamadas de GWT

Nunca he tenido problemas con el diseño CSS de mis widgets, listos para usar, personalizados o no, así que no sé a qué te refieres con eso como un error.

En cuanto al rendimiento, siempre he descubierto que el código GWT una vez compilado es rápido, y las llamadas AJAX casi siempre son más pequeñas que actualizar una página completa, pero eso no es realmente exclusivo de GWT, aunque los paquetes RPC nativos que obtienes si usas un back-end JAVA son bastante compactos.

Otros consejos

Llevamos casi 2 años trabajando con gwt.Hemos aprendido muchas lecciones.Esto es lo que pensamos:

  1. No utilice bibliotecas de widgets de terceros, especialmente gwt-ext.Acabará con su depuración, desarrollo y rendimiento en tiempo de ejecución.Si tienes preguntas sobre cómo sucede esto, contáctame directamente.

  2. Utilice gwt para completar solo las partes dinámicas de sus aplicaciones.Entonces, si tiene interacciones de usuario complejas con muchos campos.Sin embargo, no utilice los paneles que vienen con él.Tome las páginas proporcionadas por el diseñador de stock existente.Define las áreas que contendrán los controles de tu aplicación.Adjunte estos controles a la página dentro de onModuleLoad().De esta manera puedes usar las páginas estándar de tu diseñador y también hacer todo el estilo fuera de gwt.

  3. No crees toda la aplicación como una página estándar que luego construye dinámicamente todas las piezas.Si haces lo que sugiero en el punto 2, esto no sucederá de todos modos.Si construye todo dinámicamente, reducirá el rendimiento y consumirá enormes cantidades de memoria para aplicaciones medianas y grandes.Además, si haces lo que te sugiero, el botón Atrás funcionará muy bien, al igual que la indexación en los motores de búsqueda, etc.

Los otros comentaristas también tuvieron algunas buenas sugerencias.La regla general que uso es crear páginas como si estuviera haciendo una página web estándar.Luego, talla las piezas que deben ser dinámicas.Reemplácelos con elementos que tengan identificaciones y luego use RootPanel.get( id ).add( widget ) para llenar esas áreas.

Errores con los que nos hemos topado:

  • Si bien se puede aprovechar mucho el uso de algo como GWT EXT, cada vez que se utiliza este tipo de revestimiento delgado sobre una biblioteca de JavaScript, se pierde la capacidad de depurar.Más de una vez me golpeé la cabeza contra el escritorio porque no puedo inspeccionar (dentro de mi depurador IntelliJ) lo que está sucediendo en la clase de tabla GWT EXT...Todo lo que puedes ver es que es un JavaScriptObject.Esto hace que sea bastante difícil descubrir qué salió mal...

  • No tener a alguien en tu equipo que sepa CSS.Según mi experiencia, no importaba que la persona no fuera experta... basta con que tenga buenos conocimientos prácticos y conozca los términos correctos para buscar en Google cuando sea necesario.

  • Depuración en todos los navegadores.Esté atento al modo alojado fuera de proceso[1][2][3], con suerte llegará en GWT 1.6...Por ahora, sólo tienes que hacer las cosas bien con el modo alojado, luego usar el botón "Compilar/Examinar", donde puedes jugar con otros navegadores.Para mí, trabajar en Windows significa que puedo ver mi trabajo en FireFox y usar FireBug para ayudarme a modificar y mejorar las cosas.

  • IE6.Es sorprendente lo diferente que IE 6 representará las cosas.He adoptado el enfoque de aplicar un estilo a la "ventana gráfica" más externa según el navegador para poder tener reglas CSS como:

    .my-style { /* stuff that works most everywhere */ }

.msie6 .my-style { /* "override" so that styles work on IE 6 */ }

Finalmente, asegúrate de utilizar un editor que te ayude.Yo uso IntelliJ: tiene mucha inteligencia de GWT.Por ejemplo, si intento utilizar una clase que no es manejada por la emulación JRE, me avisa;si especifico un estilo para un widget y aún no he definido ese estilo, el código aparece con un pequeño garabato rojo...O, al mirar el CSS, me dirá cuándo he especificado atributos en conflicto en una sola regla.(No lo he probado todavía, pero entiendo que la versión 8 tiene un soporte GWT aún mejor, como mantener sincronizadas las interfaces e implementaciones RPC "locales" y "asíncronas").

GWT 2.0, que se supone que saldrá en los próximos meses, resuelve muchos de los problemas discutidos.

  • Cree diseños usando una sintaxis similar a html/xml
  • Carga dinámica de scripts: inicialmente solo se descargará el JS esencial.El resto se descargará según sea necesario.
  • Modo alojado en el navegador: esto podría solucionar los problemas de velocidad del modo alojado comentados, entre otros beneficios.
  • "Optimizaciones del compilador": compilación más rápida, con suerte

Vídeo de vista previa de GWT 2.0 en Google I/O

No "incapaz de superar", sino un poco doloroso por algo básico.

Manejo de fechas:

GWT utiliza el obsoleto java.util.Date lo que puede provocar un comportamiento inesperado al tratar con fechas del lado del cliente. java.util.Calendar no es compatible con GWT. Más información aquí.

Ejemplos de problemas relacionados:

Agregaré algunos puntos a los ya mencionados:

  • Enlace de datos/validación.GWT no tiene soporte de validación/vinculación de datos listo para usar, aunque están comenzando a surgir algunos proyectos en esta área.Te encontrarás escribiendo mucho de esto:
TextField fname, faddress;
...
fname.setText(person.getName());
faddress.setText(person.getAddress());
...
  • Carga lenta.Dado que gwt está en el lado del cliente, la carga diferida realmente no es una opción.Tendrás que diseñar tus RPC y objetos de dominio cuidadosamente para poder
    • envíe todos los datos de su objeto que sean necesarios
    • Evite las ganas de buscar todos sus datos
    • También deberá asegurarse de no enviar servidores proxy/objetos no serializables. hibernar4gwt te puede ayudar con estos puntos.
  • Diseño de interfaz de usuario.Es más difícil visualizar una interfaz de usuario en java (paneles, botones, etc.) que en html.
  • Soporte histórico.GWT no viene con un subsistema de Historial, ni viene con ningún subsistema para URL agradables o marcadores con estado completo.Tendrás que crear el tuyo propio (aunque admite tokens de Historia, lo cual es un comienzo).Esto sucede con todos los kits de herramientas AJAX que yo sepa.

En mi humilde opinión, a GWT le falta un marco que tenga soporte listo para usar para todos los problemas mencionados en este 'hilo'.

Estoy trabajando en un proyecto en este momento que usa EXT GWT (GXT) que no debe confundirse con GWT EXT.Hay una diferencia, EXT GWT es el que en realidad produce la empresa que escribió ExtJS, la biblioteca javascript.GWT EXT es un contenedor GWT para la biblioteca ExtJS.GXT es GWT nativo.

De todos modos, GXT todavía es algo inmaduro y carece de una comunidad sólida como creo que tiene GWT EXT.Sin embargo, el futuro está en GXT, ya que es GWT nativo y en realidad fue desarrollado por la empresa que creó ExtJS.GWT EXT está algo paralizado ya que la licencia cambió en la biblioteca ExtJS, lo que ralentizó el desarrollo de GWT EXT.

En general, creo que GWT/GXT es una buena solución para desarrollar una aplicación web.De hecho, me gusta bastante el modo alojado para el desarrollo, hace que las cosas sean rápidas y fáciles.También obtienes el beneficio de poder depurar tu código.Las pruebas unitarias con JUnit también son bastante sólidas.Todavía no he visto un excelente marco de pruebas unitarias de JavaScript que considere lo suficientemente maduro para probar una aplicación empresarial.

Para obtener más información sobre GWT EXT:http://gwt-ext.com/

Para obtener más información sobre EXT GWT (GXT):http://extjs.com/products/gxt/

No hay grandes obstáculos que no haya podido superar fácilmente.Utilice mucho el modo alojado.Como está utilizando GWT-ext, casi nunca necesitará tocar CSS usted mismo a menos que desee modificar el aspecto original.

Mi recomendación es utilizar un widget "nativo" de GWT en lugar de uno de biblioteca donde tengan características similares.

Re indexación de motores de búsqueda:Sí, el sitio no tendrá URL navegables normalmente (a menos que solo esté agregando widgets a elementos de un sitio web normal).Sin embargo, puedes hacer la funcionalidad de avance/retroceso del historial.

Utilicé GWT y GWT-ext juntos en un proyecto hace un tiempo.La experiencia me pareció bastante fluida en lo que respecta al desarrollo web, pero mi consejo sería el siguiente:

No mezcle widgets nativos de GWT con widgets EXT.Es muy confuso, ya que normalmente los nombres son los mismos (¿GWT.Button o GWText.Button?)

Una cosa que me pasó que realmente hizo que el código fuera más complejo de lo que me gustaría, fue que quería un panel que fuera a) dinámicamente actualizable b) en cascadable

Los paneles nativos de GWT son dinámicos, los paneles Ext son conectables en cascada.¿Solución?Un GWT.VerticalPanel que envuelve un panel GWTExt...Caos.:)

Pero bueno, funciona.;)

Apoyo el comentario de ykagano, la mayor desventaja es perder la V en MVC.Aunque puede separar la verdadera clase de interfaz de usuario del resto del código del lado del cliente, no puede utilizar fácilmente una página HTML generada por un diseñador gráfico/web.Esto significa que necesita un desarrollador para traducir HTML a Java.

Obtenga un editor de interfaz de usuario wysiwyg, le ahorrará mucho tiempo.Yo uso GWTDesigner.

La mayor ventaja de GWT es poder olvidarse de los problemas entre navegadores.No es 100% pero elimina casi todo ese dolor.Combinado con el beneficio de la depuración en modo alojado (a diferencia de Firebug, que es excelente pero no es lo mismo que un depurador de Java), le brinda al desarrollador una gran ventaja a la hora de generar aplicaciones ajax complejas.

Ah, y es rápido en tiempo de ejecución, especialmente si usas un filtro gzip.

Ligeramente fuera de tema, pero el canal #gwt en irc es muy útil, en caso de que tenga un problema persistente.

GWT es bastante sencillo e intuitivo.

Especialmente con el lanzamiento de UIBinder para permitir que los widgets GWT se diseñen en XML y luego se codifiquen en Java.

Entonces, si ha utilizado otras herramientas de diseño Ajax o Flash, Silverlight, etc., GWT es muy fácil de aprender.

El mayor obstáculo, si no el escollo, es GWT RPC.La razón por la que desea utilizar GWT es por el RPC asíncrono de GWT.De lo contrario, ¿por qué no confiar simplemente en CSS para formatear su página?

GWT RPC es ese elemento que le permite a su servidor actualizar datos en su servidor sin tener que actualizar la página.Esto es absolutamente necesario para páginas como las de seguimiento de la evolución de las acciones (o la actual deuda nacional y pública de EE.UU. o el número de fetos abortados en todo el mundo cada segundo).

GWT RPC requiere un cierto esfuerzo para comprenderlo, pero con unas pocas horas, debería quedar todo claro.

Además de eso, después de esforzarse un poco en aprender GWT RPC, finalmente descubre que no puede usar JSP como componente de servicio para RPC, a menos que...Tengo una serie de 8 partes (creo) en mi blog sobre cómo usar JSP como administrador de GWT RPC.Sin embargo, dado que usted no había pedido respuestas sino sólo cuestiones, desistiré de publicitar mi blog.

Entonces.Creo firmemente que los peores obstáculos/escollos al usar GWT es descubrir cómo implementar correctamente el RPC asíncrono de GWT y cómo habilitarlo para que use servidores JSP.

Nos ha costado mucho combinar nuestro código base de GWT con plantillas web HTML que obtuvimos de un diseñador web (páginas HTML estáticas con ID de división específicos que queríamos que GWT administrara).Al menos cuando lo usábamos, no podíamos lograr que GWT se integrara con partes de nuestro sitio web que no estuvieran codificadas en GWT.Al final lo hicimos funcionar, pero fue un gran truco.

  • La interfaz asíncrona que debe escribir para cada interfaz de servicio parece algo que el compilador GWT podría haber generado automáticamente.
  • Los tiempos de compilación se vuelven largos para proyectos grandes

Pero para un gran proyecto Javascript es la mejor opción.

GWT 2.4 ha solucionado muchos de los problemas antes mencionados y una gran biblioteca de widgets acaba de salir de Beta (Ext GWT 3.0.4 a.k.a.GXT), que está escrito completamente en GWT, no en un contenedor de una biblioteca JS.

Dolor restante:

  • Falta de compatibilidad con el selector CSS3, puede usar "literal()" en algunos casos para solucionarlo.
  • Falta de soporte para CSS3 y eventos de navegador modernos como transiciónFin.
  • Falta de soporte para la clase Java Calendar (muchos años después).
  • Falta de soporte JUnit4 (5 años y contando).
  • Falta de una hoja de ruta clara y un calendario de lanzamiento por parte del equipo de Google GWT.

En cuanto a GWT 2.4, Usa Firefox Al depurar GWT, es mucho más rápido que usar Chrome.Y si sólo vas a utilizar Firefox, considera poner esta línea en tu proyecto.gwt.xml archivo

<set-property name="user.agent" value="gecko1_8" />

Además, si está utilizando eclipse, agregue lo siguiente en argumentos -> Argumentos de VM:

-Xmx512m -XX:MaxPermSize=1024m -XX:PermSize=1024m

Puede dividir su servidor y cliente y usar lo siguiente en argumentos -> Argumentos del programa:-codeServerPort 9997 -dirección de inicio http://tuservidor/proyecto -noservidor

Además, para evitar actualizar su servidor con cada cambio, use JRebelhttp://zeroturnaround.com/blog/how-to-rock-out-with-jrebel-and-google-web-toolkit-gwt/Y aquí hay una demostración en vivo.http://www.youtube.com/watch?feature=player_embedded&v=4JGGFCzspaY

Un problema importante es que a veces es necesario asignar explícitamente una identificación a lo que finalmente se convierte en un elemento HTML para poder usar ciertos estilos CSS.Por ejemplo:un TabPanel de GWT solo funcionará: pase el cursor sobre tabBarItems cuando a la barra de pestañas del panel de pestañas se le haya asignado una identificación y usted especifique un cursor sobre ese elementoId.

escribí sobre algún otro desventajas de GWT en otros lugares, pero ya están cubiertos por la respuesta de Rustyshelfs :).

He trabajado mucho en GWT recientemente y esto es lo que tengo que decir:

  1. El estilo CSS es complicado solo a veces, use la herramienta de desarrollo de IE en IE y Firebug en Firefox para descubrir qué está sucediendo exactamente y obtendrá una idea clara de qué CSS debe cambiarse.
  2. Puedes utilizar trucos para que Google lo indexe.Un sitio muy famoso es http://examples.roughian.com/ Consulta sus valoraciones en google.Un sitio mucho menos famoso es www.salvin.in (no pude resistirme a mencionar eso), lo optimicé con palabras:Página de inicio de Salvin (busque en Google estas tres palabras)

No sé mucho sobre GWT-EXT, pero yo también creo que no es necesario incluir bibliotecas de terceros.

Mucha suerte en tu decisión :)

El equipo de GWT realizó muchas mejoras importantes con respecto al año pasado al lanzar GWT 2.7.Una debilidad importante de GWT fue que la compilación lleva mucho tiempo en GWT 2.6 y versiones anteriores.Esto ya no existe. GWT no tiene compilación incremental, que es súper rápida y compila solo los cambios.

GWT 2.7 ahora tiene (Fuente):

  • Construcciones incrementales ahora en solo unos segundos
  • SourceMaps más compactos y precisos
  • Soporte GSS
  • JSInterop
  • Gran rendimiento de JavaScript
  • Tamaño de código más pequeño

La mejor manera de obtener datos confiables es a partir de encuesta gwt.Uno de los mayores problemas con GWT siempre ha sido el largo tiempo de compilación.Afortunadamente, está mejorando muy rápidamente, por lo que no será un problema importante en el futuro cercano.Otro problema es que GWT es dramáticamente más complicado porque Java es un lenguaje más complicado que resiste a los malos codificadores en cada paso del camino.Además, la compilación agrega una capa.Por ejemplo, la interoperabilidad js requiere un poco de texto repetitivo.La cuestión fundamental es que GWT no fue diseñado para ser simple.Fue diseñado desde cero para aplicaciones web extremadamente complicadas y toda la comunidad prioriza constantemente el rendimiento, la calidad del código, la arquitectura, etc., por encima de la codificación sencilla.
Recuerde que puede usar js en GWT en cualquier momento, por lo que si tiene problemas con GWT, considere usar js.Al final del día, GWT es js, por lo que puedes hacer cualquier cosa en GWT que puedas en js.De hecho, la mayoría de los proyectos de GWT utilizan js.El problema es que GWT es drásticamente más complicado.Sin embargo, a veces vale la pena la complejidad adicional.

Vale la pena señalar que GWT 3.0 traerá mejoras masivas.

Reutilización de objetos de servicio RPC.
Provoca condiciones de carrera con síntomas que parecen como si la aplicación se hubiera colgado.

Peligraciones me encontré con 1.Comportamiento diferente en modo superdev.P.ej.Someclass.class.getName() funciona absolutamente bien en modo Superdev y devuelve el nombre completo de la clase.En modo productivo esto no funciona.

  1. addWidget(widget) llamará a removefromparent() del widget

GWT es una obra maestra de la tecnología.Une la programación del cliente y del servidor, convirtiéndola en una aplicación coherente: la forma en que se escribía el software antes de las "capas" y la forma en que debería escribirse.Elimina diferentes conjuntos de habilidades, falta de comunicación entre los miembros del equipo y, en general, toda la fase de diseño web:tanto el artístico como el de programación.Y es lo más cerca que estarías de un dispositivo móvil, p.Desarrollo de Android.De hecho, GWT fue diseñado para generar diferentes UI nativas, no solo HTML.Aunque se requiere una enorme disciplina para garantizar tal desacoplamiento, para mantener las capas internas independientes de la presentación.

El primer error que debes evitar, del que me llevó cuatro años darme cuenta, es utilizar extensiones de terceros como EXT-GWT, también conocido como GXT y SmartGWT.Es muy tentador comenzar a usar sus bonitos widgets de escritorio en lugar de invertir en su propio estilo, pero no puedo decir cuántos problemas tuve con SmartGWT hasta que finalmente me harté.En resumen, congela el conjunto de funciones principales de GWT en un nivel determinado (bastante desactualizado) y luego se basa en él.También tenga en cuenta que la apariencia cincelada del escritorio parece tonta hoy en día, sin mencionar el rendimiento lento, toneladas de errores y características de compatibilidad, especialmente en dispositivos móviles.Desea permanecer lo más cerca posible de los controles nativos del navegador, es decir,menús desplegables representados como elementos <select> nativos, no como controles pintados personalizados.

Gracias a las tendencias móviles, toda la experiencia de usuario se está volviendo más simple y plana, por lo que no es necesario hacer mucho para diseñar una aplicación de apariencia elegante.Aunque si quieres un aspecto "3D", también hay degradados.CSS3 hizo que todo fuera fácil y GWT lo envuelve de una manera elegante orientada a objetos a diferencia del CSS sin formato.Así que no se desanime al mirar controles básicos bastante feos en GWT Showcase.El equipo de GWT intencionalmente no ofreció ningún estilo, porque es trabajo del desarrollador.

El resto es programación de navegador prácticamente convencional en Java fuertemente tipado con hermosas API concisas.Pero, por supuesto, nunca olvides que tu código se ejecuta dentro del navegador, por lo que todas las llamadas son asincrónicas, por ejemplo.no puede llamar a los métodos GWT-RPC en un bucle (para completar alguna lista), pero debe encadenarlos recursivamente si alguna vez llega a esta situación.

Hay algunos "antipatrones" autoproclamados, como no usar GWT-RPC.Ha sido bueno conmigo hasta ahora:por 10 años.La simplicidad es clave.No pensaría ni un segundo en sacrificar algo de rendimiento marginal por la elegancia y la facilidad de mantenimiento del código.Además, aquí no es donde estarían los cuellos de botella: en la base de datos.Por supuesto, tenga en cuenta la cantidad de datos que envía al cliente.

Y si no puede encontrar o diseñar el gadget existente (lea el conjunto de elementos HTML5 enriquecido), siempre puede incluir uno de terceros.Lo hice con un popular jQuery FullCalendar.No es ninguna ciencia espacial.Todo lo demás, como Google Maps y Google Charts, tiene envoltorios semioficiales de GWT.

GWT es perfecto.La única razón por la que no recibe suficiente amor es porque los primeros usuarios de Internet que todavía influyen en la industria no provenían de las ciencias de la computación ni de los lenguajes orientados a objetos para apreciarlos.Tienen experiencia artística (Photoshop/WordPress) o de red (Perl/Python).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top