require.js

 require.js

& Prinzipien für modulares JavaScript



Navigation mit Esc, und

bit.ly/devMedia - Interaktive Version der Präsentation!

![tools](images/johannes.png) ### [JohannesHoppe.de](http://www.johanneshoppe.de/)

bit.ly/devMedia - Interaktive Version der Präsentation!

# Prinzipien
  • Werkzeuge
  • Wissen
  • Wiederholung(Unit Tests,
    nächstes Webinar)

Performance?

⌚ Zeit

  • die etwas im Browser dauert

  • die es Dauert, ein Feature
    zu verstehen,
    zu bugfixen oder
    zu ändern
# Werkzeuge ![tools](images/icon_tool.png)
* Visual Studio * [Resharper](http://www.jetbrains.com/resharper/whatsnew/#javascript) * [JSHint/JSLint](http://www.jshint.com/platforms/) * [Chrome DevTools](https://getfirebug.com/) → F12 * [YSlow](https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh)
* TDD mit [Jasmine](http://pivotal.github.com/jasmine/) * TestRunner [Chutzpah](http://chutzpah.codeplex.com/) / [Karma](http://karma-runner.github.io/0.10/index.html)
# Wissen ![tools](images/icon_mustache.png)
## Globals the mother of all antipatterns ```javascript contenteditable function foo() { return "bar"; } console.log(this['foo']()); ```
## Globals reduce, minimize, delete or kill them ```javascript contenteditable (function() { "wtf?" })(); ```
## Dependencies jQuery, Knockout, Cufon, Plugins, eigener Code...
## Dependency Management Code Laden... * in der richtigen **Reihenfolge**, * zum richtigen **Zeitpunkt** * mit **Geschwindigkeit**.
## Revealing Module Pattern ```javascript contenteditable fragment var myModule = function () { var _name = "Johannes"; function greetings() { console.log("Hello " + _name); } function setName(name) { _name = name; } return { setName: setName, greetings: greetings }; }(); ``` [» Documentation](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)
## Modul loaders use AMD (require.js) ```javascript contenteditable fragment define('test', ['jquery'], function() { return { saySomething : function() { alert("hello!"); } } }); require(['test'], function(t) { t.saySomething(); }); ```
## Events Publish/Subscribe Pattern ```javascript contenteditable var $events = $({}); $events.bind('somethingHappens', function() { alert("Something happened!"); }); $events.trigger('somethingHappens'); ```

Wiederholung

![tools](images/icon_repeat_orange.png)
![tools](images/icon_calendar_orange.png)

02.10.2013

## 02.10. [Webinar: require.js & modulares JS - Teil 2](http://developer-media.de/portfolioentry/require-js-prinzipien-fur-modulares-javascript-2/)
## 26.09. [Webinar: jQuery 2013 - Teil 2](http://developer-media.de/portfolioentry/jquery-2013-teil-2/)
## Downloads ![tools](images/icon_file.png) ### [bit.ly/devMedia](http://bit.ly/devMedia) ### [bit.ly/devMediaCode](http://bit.ly/devMediaCode)
# Danke!

Created by Johannes Hoppe | Print PDF | GitHub