O - David Hohl

eatablesurveyorInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 3 μήνες)

91 εμφανίσεις

Advanced
 
Javascript
 
with

About
 
me
 
O

David Hohl
from
Austria
O

since
1998 PHP Web Developer
O

since
2011 in Berlin/Germany
O

since
2007 eZ Publish Developer
O

UX Project Manager
and

Consulter

Jobs  
O

8
years
Senior Shop Developer
at
Reichl
and

Partner
emarketing
in Linz/Austria



e Z P a r t n e r
O

2.5
years
UX Project Manager
and

Senior Developer
at
silver.solutions
in Berlin/Germany



e Z P a r t n e r
Why
 
this
 Workshop?  
O

to

share

experiences

from
Javascript
to

eZ Publish
O

to

work

with
cool JS
frameworks

like

Backbone
and

jQuery

O

to
find
better

solutions

for

working

with
AJAX
Calls

O

to

think

about

plugins

for

your

projects

Install
 
ezajax
 
O


copy

ezajax

to

/
var
/
www
/
ezpublish
/
ezpublish_legacy
/
extension

O

edit

settings
/
override
/
site.ini.append.php

O

[
ExtensionSettings
]
O

ActiveExtensions
[]=
ezajax

O

ActiveExtensions
[]=
ezfind

O

ActiveExtensions
[]=
ezjscore

Ways
 
for
 
Including
 
O


design.ini

O

directly

about

your

template

O

Use

ezscript_require

from

ezjscore


{
ezscript_require
(
array
( ‘yourfile.
js
‘‚‘
nextfile.js
‘ ) )}
O

Do
you

think

this

is
all?
My
 personal  Hell  
O

lets
open
this

url

O

http://
ezpublish.ezsc
/eng/_
js
/
load
/
badstuff

My
 personal  Heaven  
O

lets
open
this

url

O

http://ezpublish.ezsc/eng/_js/load/
example_1

jQuery

debug

our

code

My
 Paradise  
O

Backbone.js

and

Underscore

O

Head.js

O

jQuery

O

Lets

code

with

HTML5 Data Attributes
Performance  
O

How

optimize
JS/CSS on
my

eZ
Page?
-

ezjscore
(
one
BIG FILE)
-

CDN (Akamai, AWS) (
more

files

external
)
-

Other
solutions
?
A  Fine  Way  
O

lets

talk

about

head.js

O

include
JS
and
CSS Files
O

get

better

browser

information

O

build
easy
response
design
websites

O

use

data
-attributes
Head.js
 
O

lets
open
this

url

O

http://ezpublish.ezsc/eng/_js/load/
example_2

ezjscore
 
O


minified
JS Files
O


minified
CSS Files
O

Includes
CSS
and
JS Files in
your

template

Ajax  
with

1


Collect

data

2


Send
to

the

server

3


Collect
eZ
data

4


Send
data
back
to

the

client

5


Output
data
in
the

browser

Why
 do  
you
 
use
 Ajax?  
O

to

optimize

your

performance
?
O

to
find
ways

to

avoid

cache

problems
?
O

A
cheap

way

to
send
data

to

the

server
?
O

fight
vs. Spam?
Structure
 
O


think

about

the

structure

before

sending

it

to

the

server

O

POST
or
GET ?
O


parameter

like
:
O

Type =
article
(GET)
O

Action = update (GET)
O

Id
= 12 (POST)
O

Data =
array
(POST)
Tipps  
O


use

data

attributes

O


or

use
HTML5 Database
O

easy
basic

structure

O


write

your

own

class

for

sending

and

receiving

O


try

to

use

this

class
in
every

project

optimize

your

code
all
the
time
Send  Data  
O


write
a
module
(eZ 4)
or

controller
(eZ 5)
O


use

this

module

for

every

request

O


use

actions

to

define

what

you

want

to

get

O


think

about
a
dymamic

model

like

ezajax

(
it‘s

only
a
demo
)
Send  Data  „back“  
O


use
HTML
only

for

short

content

O


always

use
a JSON
Object

O


use

the
same
structure
all
the
time
O


Define
on
server

side

where

you

have

to

put

the

data
,
define

your

target

container
(
like
an
ID,
class

or

any

other

selector

O


use

head.js

to

load

dynamic
JS Files (
depends

on
your

action

for

callbacks
)
Show  Data  on  
the
 Browser  
O

Template Engine
for
Javascript?
O


try

backbone.js

with

underscore.js

O


render

template

about
JSON
O


What
do
you

use
?
Ajax  Events  
O

lets
open
this

url

O

http://
ezpublish.ezsc
/eng/_
js
/
load
/
example_3
Extend
 
your
 
old
 Code  
O

Write simple JS
Classes
in
your

project

O


Extend

your

code
!
It‘s

very
easy
with

jQuery

or

Backbone
var

yourClass
{



add
:
function
() {


//
add
item


};
$.
extend
(
yourClass
,
otherClass
); //
jQuery

_.
extend
(
yourClass
,
otherClass
); // Backbone

Parsley
,  Backbone  
and
 
jQuery
 
with

Let‘s
 
try
 
O


include

the

files

with

head.js

plugin
/
ezajax_controller.js

parsley.js

plugin
/example_4.js
O


set

full

name

and
email
as

required

with

data-
required
=„
true

O


create
a
file

ezajax
/design/
standard
/
templates
/
examples
/
YOURFILE.tpl
AND
clear

the

cache

O


add
on
the

submit

button

data
-ajax-
tpl
=“YOURFILE“ (
without
.
tpl
)
O


go

into

the

file

ezajax
/design/
standard
/
javascript
/
plugin
/
example_4.js
and

code

the

ajax

call



Cheat  
INCLUDE FILES
<
br

class
="
ez_summer_camp

hide
"
data
-files="
plugin
/
ezajax_controller.js;parsley.js;plugin
/example_4.js">

AJAX CALL:
self.ajax_template
= $(this).
attr
('data-
ajax
-
tpl
');
self.ajax
(0, {'form':$('#demo-form').
serializeArray
()}, function(response) {

response = $.
parseJSON
(response);
$('body').append(
response.data
);
});
OUTPUT AJAX TEMPLATE:

<div
class
="alert alert-
success
">
<h4>
Hello
{$params.form.0.value}</h4>
<p>
We
will send
you

now
an
eMail

to
<strong
style="
color
:#000;">{$params.form.1.value}</strong></p>
</div>


Thank
 
you
!  
@fishme_2010
www.fishme.de


www.silversolutions.de