Einführung RequireJS Legacy-CodeRequireJS im EinsatzAndreas WolfSYN Systems GmbH9. Juni 2013RequireJS im Einsatz Andreas W...
Einführung RequireJS Legacy-CodeInhaltEinführungRequireJSLegacy-CodeRequireJS im Einsatz Andreas Wolf, SYN Systems GmbHIns...
Einführung RequireJS Legacy-Code$ whois referentAndreas Wolfaw@syn-systems.comJabber: awolf@jabber.ccc.deTwitter: @andreas...
Einführung RequireJS Legacy-CodeMotivationIn traditionellem JS-Code:Abhängigkeiten verwalten ist schwerNachladen ist kompl...
Einführung RequireJS Legacy-CodeWas ist RequireJS?RequireJS is a JavaScript le and module loader. It isoptimized for in-br...
Einführung RequireJS Legacy-CodeRequireJSimplementiert AMD-Standard (Asynchronous Module De nition)lädt Module, löst dabei...
Einführung RequireJS Legacy-CodeEinfaches BeispielDe nieren (Library/Modulname.js):1 define(Library/Modulname, [dependency...
Einführung RequireJS Legacy-CodeKon guration1 require.config({2 paths: {3 "flot": Vendor/flot/jquery.flot4 },5 shim: {6 "f...
Einführung RequireJS Legacy-CodeModulde nition1 <head>2 ...3 <script type="text/javascript" src="require-config.js"></scri...
Einführung RequireJS Legacy-CodeNutzen von Dependencies1 require([MeinModul, jquery], function(Modul, $) {2 $(a).click(fun...
Einführung RequireJS Legacy-CodeUmgehen mit Legacy-Codenicht jedes Modul benutzt de ne()die Lösung: "shim"shim ermöglichtR...
Einführung RequireJS Legacy-CodeFragen? Diskussion??RequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people to...
Inspiring people to share.
Upcoming SlideShare
Loading in …5
×

Einführung in RequireJS

2,894 views

Published on

Präsentation vom TYPO3-Camp Stuttgart 2013

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,894
On SlideShare
0
From Embeds
0
Number of Embeds
549
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Einführung in RequireJS

  1. 1. Einführung RequireJS Legacy-CodeRequireJS im EinsatzAndreas WolfSYN Systems GmbH9. Juni 2013RequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  2. 2. Einführung RequireJS Legacy-CodeInhaltEinführungRequireJSLegacy-CodeRequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  3. 3. Einführung RequireJS Legacy-Code$ whois referentAndreas Wolfaw@syn-systems.comJabber: awolf@jabber.ccc.deTwitter: @andreaswoaus Karlsruhe, Baden(-Württemberg)TYPO3-User seit 2003Mitglied im TYPO3-Core-Team seit März 2011RequireJS-User seit irgendwann 2012RequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  4. 4. Einführung RequireJS Legacy-CodeMotivationIn traditionellem JS-Code:Abhängigkeiten verwalten ist schwerNachladen ist kompliziert (script-Tags manuell in DOM einhängen)globaler Namensraum verschmutzt schnellnur eine Version einer Bibliothek gleichzeitig ladbarRequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  5. 5. Einführung RequireJS Legacy-CodeWas ist RequireJS?RequireJS is a JavaScript le and module loader. It isoptimized for in-browser use, [. . . ]. Using a modular scriptloader like RequireJS will improve the speed and quality ofyour code.(von requirejs.org)RequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  6. 6. Einführung RequireJS Legacy-CodeRequireJSimplementiert AMD-Standard (Asynchronous Module De nition)lädt Module, löst dabei Abhängigkeiten aufkann auch Legacy-Code verwendbar machenkommt meistens mit maximal zwei script-Tags ausRequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  7. 7. Einführung RequireJS Legacy-CodeEinfaches BeispielDe nieren (Library/Modulname.js):1 define(Library/Modulname, [dependency1, dependency2], function() {2 // Here be dragons3 });Einbinden (Main.js):1 require([Library/Modulname], function(Modul) {2 // More dragons here3 });RequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  8. 8. Einführung RequireJS Legacy-CodeKon guration1 require.config({2 paths: {3 "flot": Vendor/flot/jquery.flot4 },5 shim: {6 "flot": {7 deps: jquery8 }9 }10 });RequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  9. 9. Einführung RequireJS Legacy-CodeModulde nition1 <head>2 ...3 <script type="text/javascript" src="require-config.js"></script>4 <script type="text/javascript" src="require-2.1.6.js"data-main="main.js"></script>5 </head>RequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  10. 10. Einführung RequireJS Legacy-CodeNutzen von Dependencies1 require([MeinModul, jquery], function(Modul, $) {2 $(a).click(function() {3 alert("Link geklickt!");4 });56 Modul.meineFunktion();7 });RequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  11. 11. Einführung RequireJS Legacy-CodeUmgehen mit Legacy-Codenicht jedes Modul benutzt de ne()die Lösung: "shim"shim ermöglichtRequireJS kapselt Module, die in globalen Namensraum schreiben(siehe shim[<modulname>][exports])RequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  12. 12. Einführung RequireJS Legacy-CodeFragen? Diskussion??RequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  13. 13. Inspiring people to share.

×