nette.ajax.js

How to ajaxify Nette app quickly

by Vojtěch Dobeš | @vojtech-dobes at Github | working at ContentKing

What for?

Make simple PHP application work with AJAX.

Why?

… when there are tons of better tools?

  1. Angular.js
  2. Knockout.js
  3. Backbone.js
  4. Some other cool JS framework

Thin against fat

Why should a mobile device spend precious battery
on putting HTML together?

Why should an older PC spend remaining power
of processor on redrawing some content, while
server is sipping an ice tea?

PHP is still weapon of choice

Learning whole new dev-stack doesn't pay off for each project.

Why bother with AJAX?

Reducing transferred data

App can feel faster

Actually the app does not have to be supersimple

Does anybody do that today?

Yeah, Github and Basecamp for sure.

How is it used?

With Nette snippets


{snippet likes}
	{$article->getLikes()}
{/snippet}

<a class="ajax">…
						

if ($this->isAjax()) {
	$this->redrawControl('likes');
}
						

How is it used?

And in JS:


$(function () {
	$.nette.init();
});
						

What can it do?

Not just DOM replacement :)

Features

  1. best practices
    1. keep Ctrl+click for new panel
    2. do not ajaxify external links
    3. kill native behavior
  2. forms
    1. support for dynamic adding of fields
    2. coordinates of image click
  3. smarter snippets
    1. support for Back & Forward buttons
    2. infinite scrolling
    3. updating of <title>
    4. API for adding animations
    5. way to wait for multiple running animations

Other tricks

  1. killing running escape with ESC
  2. allow just one request at time
  3. switching extensions for specific requests

Anything else?

Yes - extensions.

Extensions

Ecosystem around $.ajax()


  1. originally to bypass old live()
  2. forces to write reusable JS with API
  3. way to future decomposition

Thanks for your attention.

Vojtěch Dobeš

Questions?

I have one - what are your experiences with thick and thin clients? Which one is better and when?