Folien zu unserem Vortrag beim Java Forum Stuttgart 2014
Besuchen Sie uns unter http://www.thecodecampus.de
Müssen Sie auch noch alte servergetriebene Java-Webanwendungen weiterentwickeln und wollen Ihre Kunden dabei den Genuss der Usability moderner Webseiten bieten?
In unserem Talk beim JavaForum Stuttgart 2014 haben wir anhand von Codebeispielen und Erfahrungsberichten gezeigt wie man schrittweise AngularJS in bestehende Anwendungen integriert. Dieser agile Ansatz liefert schnelle Ergebnisse und reduziert die Kosten und Risiken im Vergleich zu einer kompletten Umstellung.
Diese Präsentation zeigt wie man Hybrid Apps mit dem Ionic 2 Framework erstellt kann. Dazu wird eine Beispielapp auf Basis der Open Movie Database programmiert.
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickPhilipp Burgmer
Slides for my presentation at WebTechCon/IPC 2014.
Visit us at http://www.thecodecampus.de
Folien zu meinem Vortrag bei der WebTechCon/IPC 2014.
AngularJS verspricht, die Entwicklung moderner Single-Page-Webanwendungen radikal zu vereinfachen. Doch kann dieses Versprechen auch bei Anwendungen, die über eine Demoanwendung (To-do-App) hinausgehen, gehalten werden? In diesem Vortrag zeigen wir die Stärken und Schwächen von AngularJS anhand unserer Erfahrungen aus mehreren Projekten und unserer Schulungen. Wie meistert man den Einstieg? Was sind die Gefahren, und wie minimiert man sie? Ist AngularJS bereit für den Einsatz in großen Anwendungen? Wir geben Antworten. Zusätzlich geben wir einen Ausblick auf AngularJS 2.0, wie die bekannten Schwächen dort behoben werden sollen und was an Neuerungen zu erwarten ist.
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
node.js erlaubt die Ausführung von Javascript auf dem Server. Zusammen mit YUI3 gibt es jetzt auch noch einen echten DOM und plötzlich macht alles Spass :-)
Diese Präsentation zeigt wie man Hybrid Apps mit dem Ionic 2 Framework erstellt kann. Dazu wird eine Beispielapp auf Basis der Open Movie Database programmiert.
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickPhilipp Burgmer
Slides for my presentation at WebTechCon/IPC 2014.
Visit us at http://www.thecodecampus.de
Folien zu meinem Vortrag bei der WebTechCon/IPC 2014.
AngularJS verspricht, die Entwicklung moderner Single-Page-Webanwendungen radikal zu vereinfachen. Doch kann dieses Versprechen auch bei Anwendungen, die über eine Demoanwendung (To-do-App) hinausgehen, gehalten werden? In diesem Vortrag zeigen wir die Stärken und Schwächen von AngularJS anhand unserer Erfahrungen aus mehreren Projekten und unserer Schulungen. Wie meistert man den Einstieg? Was sind die Gefahren, und wie minimiert man sie? Ist AngularJS bereit für den Einsatz in großen Anwendungen? Wir geben Antworten. Zusätzlich geben wir einen Ausblick auf AngularJS 2.0, wie die bekannten Schwächen dort behoben werden sollen und was an Neuerungen zu erwarten ist.
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
node.js erlaubt die Ausführung von Javascript auf dem Server. Zusammen mit YUI3 gibt es jetzt auch noch einen echten DOM und plötzlich macht alles Spass :-)
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Gregor Biswanger
Die Entwicklung von Apps ist nicht einfach und jede "Systemwelt" hat ihre eigenen Tools und Anforderungen. Ob mit Java und Eclipse für Android, mit Objective-C und Xcode für iOS, oder mit den Microsoft-Tools für die Windows-Welt. Bei diesem Vortrag lernen Sie die vielfältigen Möglichkeiten der App-Entwicklung für alle gängigen Plattformen mit nur einer Programmiersprache kennen: HTML5 und JavaScript. Sie steigen mit den Grundlagen des kostenlosen Intel XDK und Apache Cordova ein und werden dann mit den wichtigsten Frameworks und Vorgehensweisen vertraut gemacht. Mit diesen Infos steigen Sie rasch zum versierten Cross-Plattform Entwickler auf.
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
HTML5 ist langsam, oder? Nein, in der Tat zeigt sich die grundlegende Geschwindigkeit von Cross-Plattform-HTML5-Anwendungen heutzutage in einem sehr positiven Licht. Es gibt aber doch ein paar Fallstricke, in denen sich der Entwickler schnell verfängt, wenn er nicht auf ein paar Punkte achtet. Der Vortrag geht zuerst auf die Vorgehensweise der Performancemessung ein. Anschließend werden die Top Performance-Tipps gezeigt, um nochmal einen ordentlichen Schub an Power herausholen zu können. Lassen Sie uns Gas geben!
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreGregor Biswanger
HTML5 ist überall - im Web, Mobile und natürlich auch auf den Desktop. Die große Stärke an HTML5 ist nicht nur, dass diese Plattform übergreifend unterstützt wird, sondern dass es immer mehr Features aus der Desktop-Welt bietet. Dennoch erfordert die Entwicklung von Desktop Anwendungen auf Basis von HTML & JavaScript neue Frameworks und Sprachen. Das Open Source Projekt Electron.NET verbindet ihr bekanntes C# & ASP.NET Core KnowHow mit den Möglichkeiten von Electron. In Kombination von C# und HTML5 können hoch performante Desktop Geschäftsanwendung für Windows, Mac und Linux entwickelt werden. Sie steigen mit den Grundlagen von Electron.NET ein und werden dann mit den wichtigsten Tools und Vorgehensweisen vertraut gemacht. Mit diesen Infos steigen Sie rasch zum versierten Cross-Platform Entwickler mit .NET auf.
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...kaftanenko
Einführung in den Technologienstack der Java Enterprise Edition (JEE) zum Bauen von komplexen Webapplikationen.
In der Prsäntation wurden die folgenden Technologien betrachtet: reilnes HTTP-Format, Servlets, JSP's (Java Server Pages) und letzendlich JSF (2.0, Java Server Faces).
EnterJS 2015 - JavaScript von Morgen schon heutePhilipp Burgmer
Präsentation zu meinem Vortrag bei der EnterJS 2015.
ECMAScript 2015, der Standard, der als Grundlage für die Implementierung von JavaScript dient, nimmt immer konkretere Formen an. Viele Teile der Spezifikation sind so gut wie fertig, und neuere Browser setzen sie bis zu einem gewissen Grad bereits um. Dennoch kann man heute und auch in naher Zukunft noch keine Anwendung mit ES 2015 ausliefern, da es eben nicht alle relevanten Browser unterstützen. In diesem Vortrag erfahren Sie, wie sich heute schon mit Transpilern und Polyfills in ES 2015 entwickeln lässt und welche Vorteile das bietet. Anhand von Codebeispielen wird gezeigt, wie man proprietäre Lösungen wie RequireJS und Promises durch neue Standards ersetzen kann und seinen Code dadurch zukunftssicher macht.
A VIAGEM... URUCARÁ... RIO AMAZONAS... PARANÁ DO COMPRIDO... CONVIVÊNCIA COM A REALIDADE CULTURAL DOS RIBEIRINHOS... ENCONTRO COM A NATUREZA... IMAGENS... HISTÓRIAS... MITOS... UMA REALIDADE SÓCIO ANTROPOLÓGICA
El documento describe el audiobranding, que involucra el uso de sonidos para crear una marca. Explica que los sonidos nos rodean todo el día y pueden transmitir mensajes. Luego discute cómo el audiobranding se originó a partir de la publicidad, la psicología y la música. Finalmente, explica que los logotipos sonoros son melodías cortas que identifican marcas de manera similar a los logotipos visuales.
Este documento presenta un itinerario turístico cultural de bajo coste por los Balcanes que incluye Bosnia y Herzegovina, Kosovo, Macedonia y Serbia. Inicialmente, analiza aspectos geográficos, económicos, políticos y humanos de cada país. Luego, describe los principales recursos turísticos de las ciudades incluidas en la ruta. Finalmente, detalla el diseño del itinerario de 12 días, con las etapas y actividades planificadas en cada destino.
II EACD Lisbon Coaching Days over the topic "On Lobby & Public Affairs | A transparent added-value strategic manner of managing political communication and Issues Management", 11th november 2014, presentation by Yolanda Ramon, Director AGENDA Public Affairs, Inforpress (Spain)
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Gregor Biswanger
Die Entwicklung von Apps ist nicht einfach und jede "Systemwelt" hat ihre eigenen Tools und Anforderungen. Ob mit Java und Eclipse für Android, mit Objective-C und Xcode für iOS, oder mit den Microsoft-Tools für die Windows-Welt. Bei diesem Vortrag lernen Sie die vielfältigen Möglichkeiten der App-Entwicklung für alle gängigen Plattformen mit nur einer Programmiersprache kennen: HTML5 und JavaScript. Sie steigen mit den Grundlagen des kostenlosen Intel XDK und Apache Cordova ein und werden dann mit den wichtigsten Frameworks und Vorgehensweisen vertraut gemacht. Mit diesen Infos steigen Sie rasch zum versierten Cross-Plattform Entwickler auf.
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
HTML5 ist langsam, oder? Nein, in der Tat zeigt sich die grundlegende Geschwindigkeit von Cross-Plattform-HTML5-Anwendungen heutzutage in einem sehr positiven Licht. Es gibt aber doch ein paar Fallstricke, in denen sich der Entwickler schnell verfängt, wenn er nicht auf ein paar Punkte achtet. Der Vortrag geht zuerst auf die Vorgehensweise der Performancemessung ein. Anschließend werden die Top Performance-Tipps gezeigt, um nochmal einen ordentlichen Schub an Power herausholen zu können. Lassen Sie uns Gas geben!
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreGregor Biswanger
HTML5 ist überall - im Web, Mobile und natürlich auch auf den Desktop. Die große Stärke an HTML5 ist nicht nur, dass diese Plattform übergreifend unterstützt wird, sondern dass es immer mehr Features aus der Desktop-Welt bietet. Dennoch erfordert die Entwicklung von Desktop Anwendungen auf Basis von HTML & JavaScript neue Frameworks und Sprachen. Das Open Source Projekt Electron.NET verbindet ihr bekanntes C# & ASP.NET Core KnowHow mit den Möglichkeiten von Electron. In Kombination von C# und HTML5 können hoch performante Desktop Geschäftsanwendung für Windows, Mac und Linux entwickelt werden. Sie steigen mit den Grundlagen von Electron.NET ein und werden dann mit den wichtigsten Tools und Vorgehensweisen vertraut gemacht. Mit diesen Infos steigen Sie rasch zum versierten Cross-Platform Entwickler mit .NET auf.
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...kaftanenko
Einführung in den Technologienstack der Java Enterprise Edition (JEE) zum Bauen von komplexen Webapplikationen.
In der Prsäntation wurden die folgenden Technologien betrachtet: reilnes HTTP-Format, Servlets, JSP's (Java Server Pages) und letzendlich JSF (2.0, Java Server Faces).
EnterJS 2015 - JavaScript von Morgen schon heutePhilipp Burgmer
Präsentation zu meinem Vortrag bei der EnterJS 2015.
ECMAScript 2015, der Standard, der als Grundlage für die Implementierung von JavaScript dient, nimmt immer konkretere Formen an. Viele Teile der Spezifikation sind so gut wie fertig, und neuere Browser setzen sie bis zu einem gewissen Grad bereits um. Dennoch kann man heute und auch in naher Zukunft noch keine Anwendung mit ES 2015 ausliefern, da es eben nicht alle relevanten Browser unterstützen. In diesem Vortrag erfahren Sie, wie sich heute schon mit Transpilern und Polyfills in ES 2015 entwickeln lässt und welche Vorteile das bietet. Anhand von Codebeispielen wird gezeigt, wie man proprietäre Lösungen wie RequireJS und Promises durch neue Standards ersetzen kann und seinen Code dadurch zukunftssicher macht.
A VIAGEM... URUCARÁ... RIO AMAZONAS... PARANÁ DO COMPRIDO... CONVIVÊNCIA COM A REALIDADE CULTURAL DOS RIBEIRINHOS... ENCONTRO COM A NATUREZA... IMAGENS... HISTÓRIAS... MITOS... UMA REALIDADE SÓCIO ANTROPOLÓGICA
El documento describe el audiobranding, que involucra el uso de sonidos para crear una marca. Explica que los sonidos nos rodean todo el día y pueden transmitir mensajes. Luego discute cómo el audiobranding se originó a partir de la publicidad, la psicología y la música. Finalmente, explica que los logotipos sonoros son melodías cortas que identifican marcas de manera similar a los logotipos visuales.
Este documento presenta un itinerario turístico cultural de bajo coste por los Balcanes que incluye Bosnia y Herzegovina, Kosovo, Macedonia y Serbia. Inicialmente, analiza aspectos geográficos, económicos, políticos y humanos de cada país. Luego, describe los principales recursos turísticos de las ciudades incluidas en la ruta. Finalmente, detalla el diseño del itinerario de 12 días, con las etapas y actividades planificadas en cada destino.
II EACD Lisbon Coaching Days over the topic "On Lobby & Public Affairs | A transparent added-value strategic manner of managing political communication and Issues Management", 11th november 2014, presentation by Yolanda Ramon, Director AGENDA Public Affairs, Inforpress (Spain)
Este documento propone crear una base de datos segmentada de tiendas de textil para poner en contacto a fabricantes y comerciantes mediante nuevas tecnologías. El sector textil español está atomizado y desconectado. La solución es actuar como representantes virtuales usando tecnología de la información. El proyecto se desarrollará en fases empezando por una newsletter y blog, luego una web y foro, y finalmente una red social. Los fabricantes pagarán por aparecer en la newsletter mientras que otros servicios aportarán ingresos ad
Javier Garcia - Verdugo Sanchez - Six Sigma Training - W4 Multiple RegressionJ. García - Verdugo
The document discusses multiple regression analysis to model the relationship between inputs and outputs of a process. An example is provided of using measurements from 8 X-ray tubes to determine which input parameters influence the width, length, and unbalancedness of the focal spot, which are the critical outputs. Regression analysis indicates that ambient temperature and humidity define the necessary evaporation temperature to control cooling water usage. The analysis allows determining the required air amount based on water temperature to maintain ammonia loss between set limits.
El transistor de unión bipolar BJT está conformado por dos diodos PN en sentidos opuestos, formando tres regiones: emisor, base y colector. Funciona amplificando la corriente de base para controlar la corriente de colector. Tiene cuatro modos de operación: activo directo, corte, saturación e inverso. Sus aplicaciones incluyen amplificación, conmutación, detección y conversión de potencia.
Kuan Yin se manifiesta en 33 formas diferentes. Esta entrada describe la sexta manifestación, en la que Kuan Yin está vestida de blanco, simbolizando pureza y la mente iluminada. Según una leyenda, Kuan Yin ayudó a un misionero cambiando su cabeza para que pudiera comprender el idioma chino. La dedicatoria pide a Kuan Yin vestida de blanco que cambie la mente del devoto con la mente cristiana universal para alcanzar la maestría en todos los rayos.
A Cascata Luminosa Light Tech é um dispositivo para iluminar cachoeiras em piscinas que utiliza LEDs para alternar entre oito cores diferentes e criar um espetáculo luminoso à noite. Pode ser instalada de diferentes formas e alimentada junto com o filtro da piscina ou por uma bomba d'água separada, dependendo da aplicação, fornecendo vazão entre 2,5-3,5 m3/h e pressão de 2 mca.
TRU is a specialty retailer of toys and baby products headquartered in New Jersey. It operates stores globally and employs around 68,000 people. In FY2013, TRU reported revenues of $13.5 billion, though profits declined from the previous year. TRU differentiates itself through integrated store formats combining toys and juvenile products. However, increased competition has intensified price wars and affected TRU's margins. TRU has also faced regulatory issues over anti-competitive practices with suppliers.
Este documento presenta información sobre diseño e implementación de redes locales, incluyendo objetivos como diseñar redes Ethernet para diferentes organizaciones y configurar servicios de VoIP. También define conceptos clave de redes como tipos de redes, historia, componentes, clasificaciones y topologías.
El documento presenta orientaciones para la incorporación de tecnologías en la formación de profesores de ciencias naturales, lenguaje y matemáticas en contextos de diversidad. Explica que el objetivo del proyecto ALFA III es formular referentes curriculares para la formación de profesores abordando procesos para un desarrollo didáctico diferenciado en contextos de diversidad y apoyados con el uso de las TIC. Proporciona orientaciones sobre el uso de recursos virtuales como objetos de aprendizaje virtuales diseñados como parte del pro
Memorias Webcast Facilitando el Gobierno Corporativo y el Control de TI media...Aranda Software
Entérese de cómo se refuerzan las directrices de Gobierno Corporativo y Control de TI basadas en las buenas prácticas de COBIT, a través del portafolio de soluciones de Aranda SOFTWARE.
Este documento presenta un resumen de la obra "Bajo la Luz del Espiritismo" de Ramatís. Incluye un prefacio del Hermano Navarana que describe el contexto actual y la necesidad de las enseñanzas de Ramatís. También contiene extractos de diálogos entre Ramatís y otros sobre temas como el dolor humano y el sufrimiento. El objetivo de la obra es examinar problemas actuales a la luz del Espiritismo y ofrecer nuevas perspectivas que conduzcan al perfeccionamiento espiritual.
Este documento proporciona información sobre varios tipos de pescados azules como la sardina, el boquerón, la caballa, el arenque, el atún, el bonito, el pez espada y el emperador. Describe sus características, propiedades nutritivas, hábitats y usos culinarios. Resalta los beneficios para la salud del consumo de pescados azules ricos en omega-3.
A talk about Prototype and Scriptaculous and their integration in Ruby on Rails. Further RJS is introduced. Presented by Jonathan Weiss at the Rails Konferenz 2006.
Web-APIs sind das aktuelle Trend-Thema in den IT-Abteilungen. Als primärer Kommunikationspartner für Fat, Mobil und Web-Clients sind Web-APIs das Rückgrat moderner verteilter Anwendungen. Sind synchrone Requests via REST und GraphQL oder Push-Notifications via Server-Sent Events und WebSocket die bessere Wahl? Welches Austauschformat sollte man wählen? Wie sieht gutes „Error Handling“ aus? Und was ist mit Themen wie Security und Versionierung? Lebensnahe Beispiele, jede Menge Best-Practices und viel Code, der nahtlos in eigene Projekte übernommen werden kann, bilden die Grundlage für die Session.
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...OPEN KNOWLEDGE GmbH
Speaker: Sebastian Reiners
Seit Java EE 7 stehen auch Enterprise-Entwicklern Server-Sent Events und WebSockets in standardisierter Form zur Verfügung. Höchste Zeit also, sich diese andere Art der Kommunikation im Web einmal näher anzusehen. Was sind Server-Sent Events und WebSockets überhaupt, was sind ihre Vorteile und wo bieten sich sinnvolle Anwendungsbereiche?
Im Rahmen der Vorstellung der unterschiedlichen Ansätze werden praktische Erfahrungen und Fallstricke, insbesondere im Zusammenspiel mit JSF und CDI veranschaulicht, sowie ein erstes Resümee gezogen.
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
Serverseitige Web-Technologien waren lange Zeit das Mittel der Wahl für Java-basierte Webanwendungen. Der Trend jedoch geht immer mehr zu JavaScript-basierten und damit Clientseitigen Web-GUIs. Wir werfen dazu einen Blick auf Google's AngularJS und erläutern an plastischen Beispielen seine Kernkonzepte und Funktionsweise. Was zeichnet AngularJS für die Realisierung der im Java-Umfeld häufig vertretenen, datengetriebenen Anwendungen besonders aus und wie fühlt sich die Entwicklung damit im direkten Vergleich dazu an?
Ein konkretes Fallbeispiel aus der Praxis, bei dem wir durch den Wechsel von einer JSF/Portlet-basierten Portal-Lösung hin zu einem AngularJS-basiertem Ansatz bei identischem JEE-Backend und Funktionalität Performance-Gewinne im Bereich von Zehnerpotenzen realisieren konnte, zeigt dabei auf, daß sich dieser Paradigmentwechsel durchaus lohnen kann!
REST APIs liegen im Trend und werden daher in vielen Projekten eingesetzt. REST besitzt Schwächen, die bei falschem Einsatz schnell sichtbar werden. Dieser Vortrag zeigt die Probleme und Schächen von REST und beschreibt die Alternativen: GraphQL, JSON Path und GRPC.
Adaptive cards allow creating cards to be used with different technologies, e.g. Bots, Microsoft Teams, WPF, UWP, Android, iPhone, and more. This presentation gives an introduction about adaptive cards, and explains what can be done with it.
Karlsruher Entwicklertag 2021: Turbo powered Web AppsJan Stamer
HTML spielt in modernen Web Anwendungen nur die zweite Geige.
JavaScript Frameworks wie Angular oder React spielen die erste. Aber muss das so sein? Mit Turbo (https://turbo.hotwire.dev/) stellt Basecamp (um Rails Gründer David Heinemeier Hansson) einen alternativen Ansatz vor, um moderne Web Anwendungen mit plain HTML zu entwickeln. Das Grundprinzip von Turbo: Über die Leitung geht nur HTML, gerendert wird auf dem Server.
Ähnlich wie Legacy WebApps mit AngularJS pimpen (20)
Slides zu meinem Talk beim Entwicklertag 2015 in Karlsruhe.
# Zusammenfassung
Sicherheit von Web-Anwendungen ist ein heißes Thema. Obwohl seit Jahren aktuell, werden die Meldungen über erneute Lücken gefühlt eher schlimmer als besser. Der Trend zu Single-Page-Anwendungen bringt für uns Entwickler eine ganze Reihe neuer Herausforderungen in punkto Sicherheit mit sich, da immer mehr Funktionalität in den Browser verlagert wird und dadurch mehr Code in nicht vertrauenswürdiger Umgebung läuft.
In diesem Talk wir anhand von AngularJS gezeigt auf was man bei SPAs achten muss. Anhand von Code-Beispielen wird natürlich auch gezeigt wie man sich z.B. vor Cross-Site-Scripting, Cross-Site-Request-Forgery und Code-Injection schützt und welche Gefahren sonst noch so lauern.
# Kurz-Bio
Philipp Burgmer studierte an der Hochschule Karlsruhe Informatik und arbeitet als Entwickler, Berater und [Trainer](http://thecodecampus.de) für die [w11k GmbH](http://w11k.de). Er ist Experte für Webtechnologien und beschäftigt sich mit der Gestaltung und Optimierung von Benutzeroberflächen. Privat interessiert er sich für Klettern und DJing.
Tutorial: Develop Mobile Applications with AngularJSPhilipp Burgmer
This document provides an overview of developing mobile applications using AngularJS and Cordova. It discusses the setup, architecture, and tools needed including Node.js, Cordova, Ionic and AngularJS. It also covers creating a basic app, the project structure, available APIs, performance optimization techniques, and using hooks and build systems like FABS.
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...Philipp Burgmer
Slides for my talk at Karlsruher Entwicklertag 2014.
Visit us at http://www.thecodecampus.de
Folien zu meinem Vortrag beim Karlsruher Entwicklertag 2014.
Für die meisten Sprachen hat sich in den letzten Jahren und Jahrzehnten ein Tool als Build-System etabliert. Maven für Java, Make für Linux, SBT für Scala usw. und so fort. Doch was ist mit Web-Anwendungen die z.B. auf AngularJS basieren, bei denen die gesamte UI im Browser läuft, die immer komplexer werden, die immer mehr Code enthalten und aus immer mehr einzelnen Dateien bestehen. Wer oder besser gesagt womit baut man hier seine Anwendung? Wer führt Tests aus und wie liefere ich solche eine Anwendung aus? Welche Hürden sind hier zu nehmen?
Mit Grunt hat sich 2013 ein modernes JavaScript Pendant zu Ant etabliert. Doch bei genauerer Betrachtung ist Grunt zwar moderner, aber trotzdem ähnlich abstrakt und low-level wie Ant. Hier kommen Bower und fabs ins Spiel: Bower kümmert sich um Dependencies und fabs konfiguriert Grunt um einen feature-reichen, anpassbaren Build zur Verfügung zu stellen.
In meinem Vortrag beim Karlsruher Entwicklertag 2014 habe ich gezeigt wie mit Grunt, Bower und fabs ein moderner Build und Development-Workflow mit LiveReload, Test-Ausführung, Code-Minimierung und vielem mehr aufgebaut werden kann um auch große Web-Anwendungen mit mehreren Entwicklern schnell voran treiben und zuverlässig ausliefern zu können.
This document introduces AngularJS, a JavaScript framework for building web applications in the browser. It discusses key AngularJS concepts like dependency injection, data binding, directives and services. It provides examples of how AngularJS implements dependency injection similarly to Java frameworks but without explicit scopes. The document demonstrates features like data binding, controllers and filters. It describes how AngularJS extends HTML with directives and handles views and routing. In conclusion, it highlights AngularJS benefits like separation of concerns, integration with other frameworks and an active community.
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJSPhilipp Burgmer
This document summarizes a presentation on building web applications with AngularJS. It introduces AngularJS as a client-side JavaScript framework that uses HTML enhanced with directives for building rich web apps. Core concepts covered include MVC pattern, two-way data binding, dependency injection, and separation of concerns. Demos illustrate data binding, controllers, filters, directives, views/routes, and animations. Built-in features and the AngularJS ecosystem are also discussed.
This document introduces AngularJS, a JavaScript framework for building web applications. It discusses how AngularJS uses HTML, CSS and JavaScript to build rich client-side applications, and some of its core concepts like model-view-controller, data binding, dependency injection, and directives. It provides examples of how to use two-way data binding, add logic with controllers, and format values with filters. The document also covers AngularJS features like views and routing, animations, built-in directives, filters and services, and its growing ecosystem of related tools. In conclusion, it recommends trying AngularJS for its clean separation of frontend and backend and ability to leverage new web technologies in the browser.
4. Probleme
• Pflege und Weiterentwicklung alter Webanwendungen
• Kunden verwöhnt von modernen Anwendungen
—> wollen ähnliche Features
• Entwickler genervt von alten Technologien
• Zunehmend schwieriger Entwickler für alte Technologien zu finden
5. Beispiele Anforderungen
• Autovervollständigung bei Suche
• Schnelle Rückmeldung auf Eingaben / Validierung
• Schnellere Reaktionszeiten der Anwendung
• Website als Anwendung nicht als Website
8. Klassische Java Webanwendungen (JSP / JSF)
!
• Rendering Template -> HTML geschieht auf dem Server
• Zustand jedes Benutzers liegt auf dem Server
—> Skaliert schlecht
• Komplette Page Requests pro Interaktion
• JavaScript nur für kleine Aufgaben
10. JavaScript Apps
• Client hat den Zustand und UI-Logik
• Server hat keinen Zustand —> Bessere Skalierung
• Server liefert
• statische Ressourcen wie Templates und JavaScript Code
• Daten via REST/JSON
• Weniger Redundanz bei Übertragung
15. Lösungsansatz
• Client per JavaScript erweitern
• Direkte Interaktion bieten
• HTML bzw. DOM nutzen
• Höheres Level als jQuery
16. AngularJS
• JavaScript-Framework zur Entwicklung von Rich Browser
Applikationen
• Bringt grundlegende UI Konzepte wie z.B. MVC in den Browser
• Erweitert HTML anstatt zu abstrahieren
• HTML kann nach den gegebenen Bedürfnissen erweitert werden
17. AngularJS
• Eigentlich für Single-Page-Anwendungen gedacht
• Leichtgewichtig, schnelle Initialisierung
• Kann ruhig bei jedem Page-Reload geladen werden
• JavaScript Code in Dateien auslagern -> Caching
• Auch auf Teil des DOM anwendbar
18. Beispiel
• Formular Validierung mit AngularJS
• Server generiert HTML mit speziellen Attributen
• AngularJS verwendet Attribute zum Validieren
• Client zeigt Fehlermeldungen sofort an
(mitgeliefert vom Server im HTML)
20. Validatoren
• Standard HTML Attribute
• min, max, required
• type mit email, date, time, number, url
• AngularJS Attribute
• ng-min-length und ng-max-length
• ng-pattern
• Eigene Validatoren per Attribut und JavaScript Code
23. Lösungsansatz
• Server liefert weiterhin fertiges HTML
• Beliebige JavaScript Frameworks oder VanillaJS im Client
• Ajax Kommunikation mittels DWR
24. DWR
• Servlet, dass Ajax-Requests verarbeitet
• DWR erstellt JavaScript Stubs für Java Klassen und übernimmt
Client - Server Kommunikation
• Eine Art “Remote Procedure Call”
• Spring / Guice / Struts Integration
• http://directwebremoting.org/dwr/index.html
25. Beispiel
• Dynamisches Anzeigen einer Liste
• Klassisch: jeweils ein voller Page Request nötig
• DWR Lösung:
1. AJAX Request zum Laden der Daten
2. JavaScript: Anzeige der Daten
26. Konfigurieren
Auch per Annotations konfigurierbar
<dwr>
<!-- Nur Klassen in <allow> werden konvertiert -->
<allow>
<!-- Definieren der Klasse die freigegeben werden soll
Erstellt wird die Klasse von Struts
-->
<create creator="struts" javascript="AjaxService">
<!-- auflisten der Methoden -->
<include method="getAllElements"/>
</create>
</allow>
</dwr>
30. Ausgangssituation
• Klassische Web-Anwendung z.B. mit Struts
• KEINE saubere Trennung zwischen Business-Logik und Web-
Schnittstelle
• Änderungen am Server in begrenztem Umfang möglich
• Anwendung soll schrittweise erneuert werden
31. Lösungsansatz
• Server liefert nur noch Daten und Templates (getrennt)
• State kann im Server bleiben
• AngularJS im Client setzt Daten und Templates zusammen
32. Probleme
• Server ist eigentlich gedacht fertig gerenderte HTML-Seiten
auszuliefern -> Hack ;)
• Java Daten müssen serialisiert werden
33. Template & Daten
• Laden der Seite in 2 Requests aufteilen
• Normaler“ Struts Request liefert eine JSP Seite mit dem HTML
Template und Code für AngularJS Anwendung
• AngularJS Anwendung lädt dann die Daten als JSON über
zusätzliche Requests vom Server
34. /*
* Struts Action
*/
public ActionForward doExecute(...) throws Exception {
final String acceptType = request.getHeader("Accept");
// Abfragen des Accept Types
// 1. Call
if (false == acceptType.startsWith("application/json")) {
// JSP Seite zurückgeben.
// Enthält die JavaScript Anwendung
return mapping.findForward("template");
}
// 2. Call
else {
// Daten erstellen und serialisieren
final Object data = buildData(request, response, form);
final String json = serializeData(data);
request.setAttribute("jsonResponse", json);
!
// antworten mit JSON
return mapping.findForward("jsonResponse");
}
}
35. https://code.google.com/p/google-gson/
/*
* Beispiel: Daten mittels GSON zu JSON sterilisieren
*/
private String serializeData(final Object data) {
final GsonBuilder builder = new GsonBuilder();
builder.serializeNulls();
final Gson gson = builder.create();
!
final String json = gson.toJson(data);
!
return json;
}
36. <!-- JsonResponse.jsp
Minimale JSP Seite, in die das Json Eingebunden wird
-->
<%@ page contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
${jsonResponse}
37. <!-- JSP Seite mit AngularJS Anwendung -->!
<script type="text/javascript">!
angular.module("List", []);!
!
angular.module('List').controller("ListCtrl", function ($scope) {!
! $scope.data = [];!
!
$scope.search = function() {!
var requestConfig = {!
searchText: $scope.searchText!
};!
!
// Aufruf der Server REST Schnittstelle!
$http.get('http://localhost/showData.do', requestConfig).then(function (response) {!
// Verarbeitung der Daten!
$scope.data = response.data;!
});!
};!
!
$scope.search();!
});!
</script>
39. Anwendungsfälle
• Listen-Ansicht mit Sortierung, Filtern und Volltextsuche
• Detail Ansicht mit dynamischem Nachladen von Daten (z.B. in Tabs
oder Popups)
• Mini-Single-Page-App auf einer Unterseite (CRUD)
41. Ausgangssituation
• Klassische Web-Anwendung mit z.B. Struts
• Saubere Trennung zwischen Business-Logik und Web-Schnittstelle
• Änderungen am Server in begrenztem Umfang möglich
42. Lösungsansätze
• Ersetzen der Web-Schnittstelle durch REST API
• Ausliefern der Templates als statisches HTML
• Client wird wieder mit AngularJS umgesetzt
43. REST (Jersey)
https://jersey.java.net/
/**
* wird unter dem Pfad "resource" bereitgestellt
*/
@Path("resource")
public class Resource {
/**
*
* Methode verarbeitet HTTP GET requests.
* Das Resultat wird als "text/plain" gesendet
*/
@GET
@Produces(MediaType.TEXT_PLAIN)
public String getIt() {
return "Got it!";
}
}
53. Herausforderungen
• Transaktionen, da asynchrone Kommunikation
• Sicherheit: Client vs. Server
• Validierung: Client + Server
• Integration in bestehendes Build System
• Sehr viele Technologien = Polyglott
54. Aber
• Macht Spaß
• Meist schnell und recht einfach möglich
• Produktivitätsschub für neue Features
• Generiert beim Kunden Lust auf mehr