The document discusses JavaScript strategies for web applications, including: - Organizing JavaScript code into app-specific and extension files - Following a progressive enhancement approach with semantic HTML and accessibility over graceful degradation - Implementing asynchronous JavaScript loading at the bottom of pages for performance and fault tolerance - Using a framework to bind JSON data to templates for updating page content without direct DOM manipulation The key concepts are building performant and accessible sites using progressive enhancement principles, asynchronous loading of JavaScript, and avoiding direct DOM manipulation by binding data to templates.

1. JAVASCRIPT @ MEME

2. THE STRUCTURE

3. js/app (goodstuff.*, JSLint)
vs
js/ext (jquery.*, Updates)

4. THE STRATEGY

5. PERFORMANCE & ACESSIBILITY
FOCUS

6. NO TECHNIQUE
GRACEFUL DEGRADATION
PROGRESSIVE ENHANCEMENT

7. PROGRESSIVE ENHANCEMENT
VS
GRACEFUL DEGRADATION

8. GRACEFUL DEGRADATION (1994)

9. PROGRESSIVE ENHANCEMENT (2003)

10. THE MAIN CONCEPTS

11. SEMANTIC HTML
ACCESSIBILITY & SEO

12. Vs
<form class=”repost”action=".../repost/" method="post”>
<input type="submit">
</form>
<div class=”repost_button” onclick=”do_repost(...);”></div>

13. BOTTOM SCRIPTS
PERFORMANCE & FAULT TOLERANCE

14. [...]
add_js_src(“”)
add_js_src(“”)
add_js_inline(“”)
[...]
</body>

15. ADD_JS_SRC
AUTO BOTTOM
AUTO MERGED
IDEMPOTENT

16. ADD_JS_INLINE
AUTO BOTTOM
AUTO MERGED
IDEMPOTENT
IMPLEMENTATION FREE?

17. add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_inline(“ $.onready( function () {
load_follow(“”);
load_repost(“”);
}));

18. add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_inline(“ $.onready( function () {
load_follow(“”);
load_repost(“”);
}));
WHY NOT?

19. add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_src(“”);
add_js_inline(“ $.onready( function () {
load_follow(“”);
load_repost(“”);
}));
WHAT IS HAPPENING?
NOT READY
NO CACHE

20. AJAX

21. <a href=”#” class=”follow” onclick=”follow(...); ”>
Follow
</a>
THE BAD CODE FIRST

22. <form class=”follow” action=".../follow/..." method="post”>
<input type="submit">
</form>
[...]
<script>
...set_form_ajax(follow_forms,...);
</script>
THE GOOD CODE

23. REPOST
FOLLOW
MORE (DASHBOARD)
COMMENT
CASES

24. THE FRAMEWORK

25. HTTP GET
goodstuff.ajax.set_link_ajax(element, success, error, loading);

26. HTTP POST
goodstuff.ajax.set_form_ajax(element, success, error, loading);

27. FOR FREE
SEMANTIC REQUESTS
LINKS = GETS (MORE)
FORMS = POSTS (REPOST)

28. FOR FREE
AJAX RESPONSE WITH CONTEXT
var success_function = function (context) {
[...]
}
goodstuff.ajax.set_link_ajax(element, success, ...);

29. FOR FREE
CRUMB
CLICK CONTROL
...AND ANY OTHER IMPROVEMENT

30. THE CODE

31. goodstuff.ajax.some_ajax = function () {
var error, success, loading;
error = function (response, context) {
[...]
};
success = function (response, context) {
[...]
};
loading = function (context) {
[...]
};
goodstuff.ajax.set_link_ajax(link, error, success, loading);
};

32. BIND JSON TO TEMPLATE

33. THE PROBLEM

34. ATTEMPTS
1. HTML directly in the js

35. ATTEMPTS
1. HTML directly in the js
11. DOM Manipulation in the js

36. ATTEMPTS
1. HTML directly in the js
11. DOM Manipulation in the js
111. Clone the last element

37. ATTEMPTS
1. HTML directly in the js
11. DOM Manipulation in the js
111. Clone the last element

38. THE SOLUTION
$template = $framework->getJSONTemplate(...)
+
goodstuff.ajax.bind_json_template(json_data, template);
template.php
view.php
ajax.js

39. THAT IS ALL, FOLKS