Enviar pesquisa
Carregar
Unobtrusive JavaScript
•
2 gostaram
•
661 visualizações
Vitaly Baum
Seguir
My presentation from the first moscow alt.net user group event
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 44
Baixar agora
Baixar para ler offline
Recomendados
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
stephskardal
jQuery and AJAX with Rails
jQuery and AJAX with Rails
Alan Hecht
Javascript first-class citizenery
Javascript first-class citizenery
toddbr
Ajax3
Ajax3
Brian Moschel
Introduction to AJAX In WordPress
Introduction to AJAX In WordPress
Caldera Labs
The Complementarity of React and Web Components
The Complementarity of React and Web Components
Andrew Rota
DirectToWeb 2.0
DirectToWeb 2.0
WO Community
The Future of CSS with Web Components
The Future of CSS with Web Components
ColdFusionConference
Recomendados
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
stephskardal
jQuery and AJAX with Rails
jQuery and AJAX with Rails
Alan Hecht
Javascript first-class citizenery
Javascript first-class citizenery
toddbr
Ajax3
Ajax3
Brian Moschel
Introduction to AJAX In WordPress
Introduction to AJAX In WordPress
Caldera Labs
The Complementarity of React and Web Components
The Complementarity of React and Web Components
Andrew Rota
DirectToWeb 2.0
DirectToWeb 2.0
WO Community
The Future of CSS with Web Components
The Future of CSS with Web Components
ColdFusionConference
Our application got popular and now it breaks
Our application got popular and now it breaks
ColdFusionConference
Svelte JS introduction
Svelte JS introduction
Mikhail Kuznetcov
AngularJS for Java Developers
AngularJS for Java Developers
Loc Nguyen
Web Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing Combination
Andrew Rota
A brave new web - A talk about Web Components
A brave new web - A talk about Web Components
Michiel De Mey
Up and Running with ReactJS
Up and Running with ReactJS
Loc Nguyen
BPM-3 Advanced Workflow Deep Dive
BPM-3 Advanced Workflow Deep Dive
Alfresco Software
BPM-2 Introduction to Advanced Workflows
BPM-2 Introduction to Advanced Workflows
Alfresco Software
BPM-1 Introduction to Advanced Workflows
BPM-1 Introduction to Advanced Workflows
Alfresco Software
22 j query1
22 j query1
Fajar Baskoro
Angular js vs. Facebook react
Angular js vs. Facebook react
Keyup
AtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using now
Atlassian
AngularJS Basics
AngularJS Basics
Ravi Mone
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
Dan Wahlin
JavaScript and jQuery Basics
JavaScript and jQuery Basics
Kaloyan Kosev
Building a js widget
Building a js widget
Tudor Barbu
Modern frontend development with VueJs
Modern frontend development with VueJs
Tudor Barbu
Knockout.js
Knockout.js
Vivek Rajan
AtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-ons
Atlassian
Introduction to Polymer
Introduction to Polymer
Egor Miasnikov
Building DSLs On CLR and DLR (Microsoft.NET)
Building DSLs On CLR and DLR (Microsoft.NET)
Vitaly Baum
Современный веб-сайт на Share point
Современный веб-сайт на Share point
Vitaly Baum
Mais conteúdo relacionado
Mais procurados
Our application got popular and now it breaks
Our application got popular and now it breaks
ColdFusionConference
Svelte JS introduction
Svelte JS introduction
Mikhail Kuznetcov
AngularJS for Java Developers
AngularJS for Java Developers
Loc Nguyen
Web Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing Combination
Andrew Rota
A brave new web - A talk about Web Components
A brave new web - A talk about Web Components
Michiel De Mey
Up and Running with ReactJS
Up and Running with ReactJS
Loc Nguyen
BPM-3 Advanced Workflow Deep Dive
BPM-3 Advanced Workflow Deep Dive
Alfresco Software
BPM-2 Introduction to Advanced Workflows
BPM-2 Introduction to Advanced Workflows
Alfresco Software
BPM-1 Introduction to Advanced Workflows
BPM-1 Introduction to Advanced Workflows
Alfresco Software
22 j query1
22 j query1
Fajar Baskoro
Angular js vs. Facebook react
Angular js vs. Facebook react
Keyup
AtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using now
Atlassian
AngularJS Basics
AngularJS Basics
Ravi Mone
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
Dan Wahlin
JavaScript and jQuery Basics
JavaScript and jQuery Basics
Kaloyan Kosev
Building a js widget
Building a js widget
Tudor Barbu
Modern frontend development with VueJs
Modern frontend development with VueJs
Tudor Barbu
Knockout.js
Knockout.js
Vivek Rajan
AtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-ons
Atlassian
Introduction to Polymer
Introduction to Polymer
Egor Miasnikov
Mais procurados
(20)
Our application got popular and now it breaks
Our application got popular and now it breaks
Svelte JS introduction
Svelte JS introduction
AngularJS for Java Developers
AngularJS for Java Developers
Web Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing Combination
A brave new web - A talk about Web Components
A brave new web - A talk about Web Components
Up and Running with ReactJS
Up and Running with ReactJS
BPM-3 Advanced Workflow Deep Dive
BPM-3 Advanced Workflow Deep Dive
BPM-2 Introduction to Advanced Workflows
BPM-2 Introduction to Advanced Workflows
BPM-1 Introduction to Advanced Workflows
BPM-1 Introduction to Advanced Workflows
22 j query1
22 j query1
Angular js vs. Facebook react
Angular js vs. Facebook react
AtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using now
AngularJS Basics
AngularJS Basics
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
JavaScript and jQuery Basics
JavaScript and jQuery Basics
Building a js widget
Building a js widget
Modern frontend development with VueJs
Modern frontend development with VueJs
Knockout.js
Knockout.js
AtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-ons
Introduction to Polymer
Introduction to Polymer
Destaque
Building DSLs On CLR and DLR (Microsoft.NET)
Building DSLs On CLR and DLR (Microsoft.NET)
Vitaly Baum
Современный веб-сайт на Share point
Современный веб-сайт на Share point
Vitaly Baum
SharePoint Introduction
SharePoint Introduction
Vitaly Baum
SharePoint, LINQ, OData
SharePoint, LINQ, OData
Vitaly Baum
Twitter Job Search
Twitter Job Search
Laura Ledgerwood
DLR Hosting
DLR Hosting
Vitaly Baum
Moscow ALT.NET Intro
Moscow ALT.NET Intro
Vitaly Baum
Using Social Media To Job Search
Using Social Media To Job Search
Laura Ledgerwood
SharePoint Search от мала до велика
SharePoint Search от мала до велика
Vitaly Baum
SharePoint: Object Model & Web Parts
SharePoint: Object Model & Web Parts
Vitaly Baum
Backpacks to briefcases, spring 2014
Backpacks to briefcases, spring 2014
Laura Ledgerwood
Решения сообщества для SharePoint
Решения сообщества для SharePoint
Vitaly Baum
SharePoint и внешние данные
SharePoint и внешние данные
Vitaly Baum
Azure Mobile Backend
Azure Mobile Backend
Vitaly Baum
ASP.NET MVC Internals
ASP.NET MVC Internals
Vitaly Baum
Sapphire
Sapphire
Vitaly Baum
Developing .net without leaving from unix shell
Developing .net without leaving from unix shell
Vitaly Baum
Remoto powered by Windows Azure
Remoto powered by Windows Azure
Vitaly Baum
Destaque
(18)
Building DSLs On CLR and DLR (Microsoft.NET)
Building DSLs On CLR and DLR (Microsoft.NET)
Современный веб-сайт на Share point
Современный веб-сайт на Share point
SharePoint Introduction
SharePoint Introduction
SharePoint, LINQ, OData
SharePoint, LINQ, OData
Twitter Job Search
Twitter Job Search
DLR Hosting
DLR Hosting
Moscow ALT.NET Intro
Moscow ALT.NET Intro
Using Social Media To Job Search
Using Social Media To Job Search
SharePoint Search от мала до велика
SharePoint Search от мала до велика
SharePoint: Object Model & Web Parts
SharePoint: Object Model & Web Parts
Backpacks to briefcases, spring 2014
Backpacks to briefcases, spring 2014
Решения сообщества для SharePoint
Решения сообщества для SharePoint
SharePoint и внешние данные
SharePoint и внешние данные
Azure Mobile Backend
Azure Mobile Backend
ASP.NET MVC Internals
ASP.NET MVC Internals
Sapphire
Sapphire
Developing .net without leaving from unix shell
Developing .net without leaving from unix shell
Remoto powered by Windows Azure
Remoto powered by Windows Azure
Semelhante a Unobtrusive JavaScript
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
Andrew Rota
Soa development using javascript
Soa development using javascript
DsixE Inc
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
Alive Kuo
Implementation of GUI Framework part3
Implementation of GUI Framework part3
masahiroookubo
e-suap - client technologies- english version
e-suap - client technologies- english version
Sabino Labarile
jQuery Objects
jQuery Objects
Steve Wells
Plone Interactivity
Plone Interactivity
Eric Steele
Rails is not just Ruby
Rails is not just Ruby
Marco Otte-Witte
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
James Rakich
Enough with the javas cript already! de Nicholas Zakas
Enough with the javas cript already! de Nicholas Zakas
Kubide
Enough with the JavaScript already!
Enough with the JavaScript already!
Nicholas Zakas
Building Scalable Websites with Perl
Building Scalable Websites with Perl
Perrin Harkins
Dan Webb Presentation
Dan Webb Presentation
RubyOnRails_dude
A Peek At The Future: Going Beyond JavaServer Faces 2.0 With RichFaces 4
A Peek At The Future: Going Beyond JavaServer Faces 2.0 With RichFaces 4
balunasj
Building and deploying React applications
Building and deploying React applications
Astrails
jQuery (MeshU)
jQuery (MeshU)
jeresig
Open Source Ajax Solution @OSDC.tw 2009
Open Source Ajax Solution @OSDC.tw 2009
Robbie Cheng
前端概述
前端概述
Ethan Zhang
jQuery Presentation to Rails Developers
jQuery Presentation to Rails Developers
Yehuda Katz
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
Mike Subelsky
Semelhante a Unobtrusive JavaScript
(20)
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
Soa development using javascript
Soa development using javascript
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
Implementation of GUI Framework part3
Implementation of GUI Framework part3
e-suap - client technologies- english version
e-suap - client technologies- english version
jQuery Objects
jQuery Objects
Plone Interactivity
Plone Interactivity
Rails is not just Ruby
Rails is not just Ruby
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
Enough with the javas cript already! de Nicholas Zakas
Enough with the javas cript already! de Nicholas Zakas
Enough with the JavaScript already!
Enough with the JavaScript already!
Building Scalable Websites with Perl
Building Scalable Websites with Perl
Dan Webb Presentation
Dan Webb Presentation
A Peek At The Future: Going Beyond JavaServer Faces 2.0 With RichFaces 4
A Peek At The Future: Going Beyond JavaServer Faces 2.0 With RichFaces 4
Building and deploying React applications
Building and deploying React applications
jQuery (MeshU)
jQuery (MeshU)
Open Source Ajax Solution @OSDC.tw 2009
Open Source Ajax Solution @OSDC.tw 2009
前端概述
前端概述
jQuery Presentation to Rails Developers
jQuery Presentation to Rails Developers
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
Último
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Igalia
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Pixlogix Infotech
Último
(20)
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Unobtrusive JavaScript
1.
UJS Unobtrusive JavaScript
2.
•
Software Developer • Blogger • Podcaster • Speaker vitaly.baum@gmail.com www.butaji.ru
3.
Agenda •
What’s the problem • Patterns • Rails.js • Adaptation – ASP.NET MVC
4.
5.
.ajax
6.
What’s the problem •
Server-side JavaScript generation – GWT – Script#
7.
What’s the problem •
A lot of JavaScript frameworks – jQuery – Prototype
8.
Patterns just
step on a rake
9.
Template Patterns •
Double templating • Just Ajax • Update panel • Loaded JavaScript
10.
Double templating • Server
side • Client side – Page layout – Async – Custom DSLs [Haml]
11.
Double templating <!-- Server
side --> <h2><%= product.Name %></h2> <p><%= product.Description %></p>
12.
Double templating <script type="text/javascript">
function addProduct(prod) { var pDiv = "<h2>" + prod.Title + "</h2>" + "<p>" + prod.Descr + "</p>"; $("#items").append(pDiv); } </script>
13.
Double templating • Less
client cpu load • Less traffic • Different places with markup
14.
Just Ajax JavaScript
JSON/XML JavaScript HTML Server
15.
Just Ajax JavaScript
JSON/XML JavaScript HTML Server <div id="items"></div> $.ajax(…)
16.
Just Ajax JavaScript
JSON/XML JavaScript HTML Server {[ { "item": { "title": "product 1"} }, { "item": { "title": "product 2" } } ]}
17.
Just Ajax JavaScript
JSON/XML JavaScript HTML Server $("#items").appentTo(pDiv);
18.
Just Ajax JavaScript
JSON/XML JavaScript HTML Server <div id="items"> <h2>product 1</h2> <h2>product 2</h2> </div>
19.
Just Ajax • More
client cpu load • Less time on page load • Less traffic
20.
Update panel • Full
page post-back • Partial page refreshing
21.
Update panel
John 1000$ OK Total 0 Client Server Magic JS
22.
Update panel
John 1000$ OK Code Total 0 Client Server Magic JS
23.
Update panel
John 1000$ OK Code Total 0 Client Server Magic JS
24.
Update panel •
More traffic/complexity • Automatic management • Constraints • Less work
25.
Loaded JavaScript • Partial
post-back • Partial refreshing
26.
Loaded JavaScript
John 1000$ OK Code Total 0 Client Server Hand-written JS
27.
Loaded JavaScript • Fine
tuning • Not too much work • One template
28.
Rails.js my
pretty love
29.
Unobtrusive JavaScript in Rails
2.3 remote_form_for(@item)
30.
Unobtrusive JavaScript in Rails
2.3 remote_form_for(@item) <form action="/posts" class="new_post“ id="new_post" method="post" onsubmit="new Ajax.Request( '/posts', {asynchronous:true, evalScripts:true, parameters: Form.serialize(this)}); return false;">
31.
Unobtrusive JavaScript in Rails
2.3 link_to 'Destroy', @item, :confirm => 'Are you sure?',:method => :delete
32.
Unobtrusive JavaScript in Rails
2.3 link_to 'Destroy', @item, :confirm => 'Are you sure?',:method => :delete <a href="/items/1" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute ('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', 'LM2fEF6HuRWdYUZdEumWlemhI6iDPH97pqWhO4jEpiU='); f.appendChild(s);f.submit(); };return false;">Destroy</a>
33.
data-* works even
in IE6
34.
HTML 5 custom
data attributes • data-remote • data-method • data-confirm • data-disable-with
35.
Unobtrusive JavaScript in Rails
3 form_for(@item, :remote => true)
36.
Unobtrusive JavaScript in Rails
3 form_for(@item, :remote => true) <form action="/items" class="new_item" data-remote="true" id="Form1" method="post">
37.
Unobtrusive JavaScript in Rails
3 link_to 'Destroy', @item, :confirm => 'Are you sure?',:method => :delete
38.
Unobtrusive JavaScript in Rails
3 link_to 'Destroy', @item, :confirm => 'Are you sure?',:method => :delete <a href="/items/1" data-confirm="Are you sure?" data-method="delete“ rel="nofollow">Destroy</a>
39.
Unobtrusive JavaScript HTML Custom
Data Attributes JavaScript Driver JavaScript Framework
40.
Rails 3 JavaScript
Drivers • Prototype: default • jQuery: http://github.com/rails/jquery-ujs • MooTools: http://mootools.net/forge/p/rails_3_driver
41.
What if I
want UJS into my framework
42.
ASP.NET Adaptation
43.
Summary •
What’s the problem • Patterns • Rails.js • Adaptation – ASP.NET MVC
44.
Thank you!
Moscow ALT.NET here http://groups.google.com/group/moscow-altnet Vitaly Baum here http://butaji.ru vitaly.baum@gmail.com
Baixar agora