Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20120207 prs ib_js_libraries_v02

525 views

Published on

Internet Briefing Präsentation

  • Be the first to comment

  • Be the first to like this

20120207 prs ib_js_libraries_v02

  1. 1. Web Lösungen mit jQuery und extJS Egal ob es sich um komplexe Business Lösungen oder einfache Formulare handelt, stehen heute für die Realisierung von Web-Lösungen sehr mächtige Frontend Libraries zur Verfügung. Dabei spart man nicht nur Zeit und Geld bei der Umsetzung, sondern stellt gleichzeitig auch sicher, dass die Lösung technisch korrekt daherkommt - sofern man die wichtigsten Tipps und Tricks einhält. INM zeigt anhand von konkreten Beispielen die Entstehung von Web-Lösungen mittels jQuery und extJS. Welches deren Vor- und Nachteile sind, welche Bedingungen zu erfüllen und welche Schritte notwendig sind um von Javascript Libraries zu profitieren. - Top 5 Javascript-Libraries - Einsatzgebiet mit Vor- und Nachteile von jQuery und extJS - Wie integriere und verwende ich jQuery und extJS in einer Weblösung - 3 konkrete Plugin Beispiele von jQuery und extJS - Wirtschaftliche Aspekte bei der Nutzung von Javascript-Libraries
  2. 2. Willkommen. WLAN Passwort: BirmensdorferStrasse1508003ZH Hashtag: #
  3. 3. Web-Lösungen mit jQuery und extJS
  4. 4. Hilfe! <ul><li>60+ Libraries!? </li></ul>
  5. 5. DNA Analyse. <ul><ul><li>Ajax Support </li></ul></ul><ul><ul><li>Element Selektoren </li></ul></ul><ul><ul><li>DOM Durchwanderung </li></ul></ul><ul><ul><li>DOM Manipulation </li></ul></ul><ul><ul><li>Event Handling </li></ul></ul><ul><ul><li>JSON </li></ul></ul><ul><ul><li>Cross-Browser Kompatibilität </li></ul></ul>
  6. 6. Unsere Top 5. jQuery ExtJS Prototype YUI MooTools UI Komponenten + jQuery UI + Script.aculo.us + Mootools More UX Verbesserungen + Script.aculo.us Designvorlagen + jQuery UI Grösse 92 KB 158 MB (Core: 84 KB) 160 KB 23 MB (Core: 28 KB) 93 KB CDN (Core) http://code.jquery.com/jquery-1.7.1.min.js https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js Lizenz GPL / MIT GPL / Commercial MIT BSD MIT
  7. 7. <ul><ul><li>jQuery und Prototype zur Erweiterung von grafischen Web-Oberflächen. </li></ul></ul><ul><ul><li>ExtJS und YUI für applikatorische Lösungen . </li></ul></ul><ul><ul><li>Mootools für Animationen und grafische Gestaltung. </li></ul></ul>Libraries im Einsatz.
  8. 8. Was will ich? <ul><ul><li>Animation </li></ul></ul><ul><ul><li>Emotion </li></ul></ul><ul><ul><li>Coolness </li></ul></ul>
  9. 9. Was will ich? <ul><ul><li>Spass </li></ul></ul><ul><ul><li>spielerisch </li></ul></ul><ul><ul><li>grafisch </li></ul></ul><ul><ul><li>Usability </li></ul></ul>
  10. 10. Was will ich? <ul><ul><li>funktional </li></ul></ul><ul><ul><li>strukturiert </li></ul></ul><ul><ul><li>einfach </li></ul></ul>
  11. 11. www.blacksocks.com <ul><ul><li>Frontend mit jQuery </li></ul></ul><ul><ul><li>Backend mit extJS </li></ul></ul><ul><ul><li>2 Libraries in einer Plattform?! </li></ul></ul><ul><ul><li>Wie geht dies? </li></ul></ul>
  12. 12. Let us code! <ul><ul><li>DOM Traversal </li></ul></ul><ul><ul><li>DOM Manipulation </li></ul></ul><ul><ul><li>Animationen </li></ul></ul><ul><ul><li>Events </li></ul></ul><ul><ul><li>Ajax </li></ul></ul><ul><ul><li>Datenspeicherung </li></ul></ul><ul><ul><li>Templating </li></ul></ul>
  13. 13. Get ready! <ul><ul><li>http://jquery.com/ </li></ul></ul><ul><ul><li>Tutorials </li></ul></ul><ul><ul><li>API Reference </li></ul></ul><ul><ul><li>UI-Widgets </li></ul></ul><ul><ul><li>Themes (Designvorlagen für UI-Widgets) </li></ul></ul><ul><ul><li>PlugIns </li></ul></ul>
  14. 14. Weitere Beispiele. <ul><li>Textmanipulationen </li></ul><ul><ul><li>slabText - Arctext </li></ul></ul><ul><ul><li>Bilder- / Inhaltsslider </li></ul></ul><ul><ul><li>Flow Slider - Slidorion </li></ul></ul><ul><ul><li>Layout </li></ul></ul><ul><ul><li>ResponseJS - SlickWrap </li></ul></ul><ul><ul><li>Applikatorische </li></ul></ul><ul><ul><li>jsPlumb - UILayout </li></ul></ul><ul><ul><li>Experimentell </li></ul></ul><ul><ul><li>Tubular - Before/After </li></ul></ul>
  15. 15. Mobile Adaption. <ul><li>jQuery und Sencha Mobile Framework: </li></ul><ul><li>1 Umsetzung für ganze mobile Palette </li></ul><ul><li>touch-optimiert </li></ul><ul><li>viele UI-Komponenten </li></ul><ul><li>Themes </li></ul><ul><li>3rd-Party Addons </li></ul><ul><li>http://jquerymobile.com/ </li></ul><ul><li>http://www.sencha.com/products/touch/demos </li></ul>
  16. 16. Checkliste. <ul><ul><li>Was will ich?  Auswahl der Library inkl. Kompatibilitätscheck (falls nicht neu) </li></ul></ul><ul><ul><li>Integration (lokal oder CDN?) </li></ul></ul><ul><ul><li>bei Customizing entweder Copy (old fashioned) vs. Extension/Overloading (OO) </li></ul></ul><ul><ul><li>Kompatibilität mit allen PlugIns </li></ul></ul><ul><ul><li>Manueller Check der Seite </li></ul></ul>
  17. 17. Pay Attention! <ul><li>Updates </li></ul><ul><ul><li>Sicherstellung der Funktionalitäten </li></ul></ul><ul><ul><li>Profitieren von neuen Features und Performanceupgrades </li></ul></ul><ul><li>Rechtliches </li></ul><ul><ul><li>Lizenzmodell überprüfen, va. bei ExtJS </li></ul></ul><ul><ul><li>Support: Community oder persönlich </li></ul></ul>
  18. 18. Stay Tuned. <ul><li>jQuery Aktualisierungen: http://feeds.feedburner.com/jquery/ </li></ul><ul><li>ExtJS: http://feeds.feedburner.com/SenchaBlog </li></ul>
  19. 19. Take Advantage. <ul><li>Mehr Zeit für Kundenbedürfnisse </li></ul><ul><li>Konzentration aufs Wesentliche </li></ul><ul><li>Erleichterung in der Programmierung </li></ul><ul><li>Wiederverwendung auf allen Ebenen </li></ul><ul><li>Qualität </li></ul><ul><li>Innovation ohne Investitionen </li></ul><ul><li>Time-To-Market </li></ul>
  20. 20. Fragen?
  21. 21. Vielen Dank! Christian Palatinus Technischer Leiter INM AG Usterstrasse 202, CH-8620 Wetzikon ZH Phone: +41 44 934 50 83 Mobile: +41 79 424 70 18 Fax: +41 44 934 50 55 E-Mail: [email_address] Web: www.inm.ch Blog: www.website-marketing.ch CMS G3: www.cms-g3.ch Aniello Bove COO, Managing Partner INM AG Usterstrasse 202, CH-8620 Wetzikon ZH Phone: +41 44 934 50 62 Mobile: +41 79 261 00 16 Fax: +41 44 934 50 55 E-Mail: [email_address] Web: www.inm.ch Blog: www.website-marketing.ch CMS G3: www.cms-g3.ch

×