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!