Your SlideShare is downloading. ×
Einführung in RequireJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Einführung in RequireJS

1,591
views

Published on

Präsentation vom TYPO3-Camp Stuttgart 2013

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
1,591
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Einführung RequireJS Legacy-CodeRequireJS im EinsatzAndreas WolfSYN Systems GmbH9. Juni 2013RequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  • 2. Einführung RequireJS Legacy-CodeInhaltEinführungRequireJSLegacy-CodeRequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Einführung RequireJS Legacy-CodeFragen? Diskussion??RequireJS im Einsatz Andreas Wolf, SYN Systems GmbHInspiring people toshare
  • 13. Inspiring people to share.