Früher war alles besser - sowieso! Konnte man vor 20 Jahren alleine mit HTML einen Webauftritt gestalten, hat sich die Anzahl der Technologien, die eine Webentwicklerin beherrschen muss, vervielfacht. Was ist wichtig, was unwichtig? In diesem Vortrag beleuchtet Jens-Christian den aktuellen Zoo von Technologien, und zeigt auf, wie sich diese Vielfalt sinnvoll bändigen lässt.
HTML(5), CSS(3), JavaScript, CoffeeScript, JavaScript Frameworks (jQuery, Prototype, Moo, Dojo, Ext, ...), JavaScript Microframeworks (Backbone, Ember, Flatiron), Templatingsprachen, Hilfsmittel zur Gestaltung von CSS (SASS, SCSS), Responsive Design, Browsererkennung, Caching, Performancetweaks, Testing und vieles mehr wird thematisiert.
29. Websockets
var sockets = new webSockets("ws://foo.example.com:8181/socket");
sockets.bind("open", function (msg) {
debug(Verbindung steht!");
});
sockets.bind("close", function (msg) {
debug("Verbindung verloren!");
});
sockets.bind("doStuff", function (msg) {
var data = msg.data;
if (data) {
doSomething(data);
}
}
);
30. Datei Zugriff
<ol ondragstart="dragStartHandler(event)">
<li draggable="true" data-value="fruit-apple">Apples</li>
<li draggable="true" data-value="fruit-orange">Oranges</li>
<li draggable="true" data-value="fruit-pear">Pears</li>
</ol>
<script>
var internalDNDType = 'text/x-example';
function dragStartHandler(event) {
if (event.target instanceof HTMLLIElement) {
// use the element's data-value="" attribute as the value to be moving:
event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
event.dataTransfer.effectAllowed = 'move'; // only allow moves
} else {
event.preventDefault(); // don't allow selection to be dragged
}
}
</script
http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dragevent-and-datatransfer-interfaces
39. Werkzeuge
The Way of the carpenter is to
become proficient in the use of
his tools, first to lay his plans with
a true measure and then perform
his work according to plan.
– Go Rin No Sho
41. HTML
<div id="profile">
profile
<div class="left column">
left column
<h4>Willkommen</h4>
h4 Willkommen
<p id="address"><%= current_user.address %></p>
p address =
</div>
<div class="right column">
right column
<ul>
ul
<li id="email"><%= current_user.email %></li>
li email =
<li id="bio"><%= current_user.bio %></li>
li bio =
</ul>
</div>
</div>
42. HTML
profile
left column
h4 Willkommen
p address = current_user.address
right column
ul
li email = current_user.email
li bio = current_user.bio
43. HAML
profile
left column
h4
p address= current_user.address
right column
ul
li email= current_user.email
li bio= current_user.bio
44. HAML
#profile
profile
.left.column
left column
%h4 Willkommen
h4
%p#address= current_user.address
p address=
.right.column
right column
%ul
ul
%li#email= current_user.email
li email=
%li#bio= current_user.bio
li bio= current_user
46. HAML
#profile
profile
.left.column
left column
%h4 Willkommen
h4
%p#address= current_user.address
p address=
.right.column
right column
%ul
ul
%li#email= current_user.email
li email=
%li#bio= current_user.bio
li bio= current_user
47. Jade
profile
left column
h4 Willkommen
p address= current_user.address
right column
ul
li email= current_user.email
li bio= current_user.bio
http://jade-lang.com/
48. Jade
#profile
profile
.left.column
left column
h4 Willkommen
p address= current_user.address
p#address=
.right.column
right column
ul
li email= current_user.email
li#email=
li bio= current_user
li#bio= current_user.bio
http://jade-lang.com/
96. CoffeeScript
number = 42
opposite = true
number = -42 if opposite
square = (x) -> x * x
list = [1, 2, 3, 4, 5]
math =
root: Math.sqrt
square: square
cube: (x) -> x * square x
race = (winner, runners...) ->
print winner, runners
alert "I knew it!" if elvis?
cubes = (math.cube num for num in list)
97. var cubes, list, math, num, number, race = function() {
opposite, race, square, var runners, winner;
__slice = [].slice; winner = arguments[0], runners = 2 <=
arguments.length ? __slice.call(arguments, 1) : [];
number = 42; return print(winner, runners);
};
opposite = true;
if (typeof elvis !== "undefined" && elvis !== null) {
if (opposite) { alert("I knew it!");
number = -42; }
}
cubes = (function() {
square = function(x) { var _i, _len, _results;
return x * x; _results = [];
}; for (_i = 0, _len = list.length; _i < _len; _i++) {
num = list[_i];
list = [1, 2, 3, 4, 5]; _results.push(math.cube(num));
}
math = { return _results;
root: Math.sqrt, })();
square: square,
cube: function(x) {
return x * square(x);
}
};
http://coffeescript.org/
101. Beyond HTML Präsentation an ONE Konferenz 2012 von Jens-Christian Fischer steht unter einer
Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Schweiz Lizenz.
Notes de l'éditeur
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Um Daten darzustellen, ohne auf Clientseite HTML zu bauen\n (auch wenn es mit jQuery &#x201E;einfacher&#x201C; geht)\n Funktioniert teilweise auch Serverseitig \n