Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript for PHP Developers
Search
Daniel Laxar
February 10, 2015
Programming
0
88
JavaScript for PHP Developers
Talk given at ViennaPHP Meetup in February 2015
Daniel Laxar
February 10, 2015
Tweet
Share
More Decks by Daniel Laxar
See All by Daniel Laxar
MongoDB with PHP
dlaxar
1
350
Scrum
dlaxar
2
170
Other Decks in Programming
See All in Programming
CursorはMCPを使った方が良いぞ
taigakono
1
240
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
110
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
15k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
200
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
RailsConf 2023
tenderlove
30
1.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Embracing the Ebb and Flow
colly
86
4.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Producing Creativity
orderedlist
PRO
346
40k
Transcript
JavaScript for PHP developers
Daniel Laxar @dlaxar
JavaScript for PHP developers
Let’s be honest…
JavaScript is weird.
What this talk is about Showing ways to deal with
JS
What this talk isn’t about Make you like JS Basics
of JS Make you a JS Pro
Today’s Agenda Facts Code Structures Gottchas node.js
JavaScript developed in 10 days first seen in Netscape works
without jQuery Client Side scripting language runs in a VM incompatible as hell
PHP JS obj->prop class::prop obj.prop thing.prop
Code Structures IFFY Namespaces Objects Clojures
IFFY Immediately Invoked Function Expression (IFFY - wait… what?)
Why do that? Avoid polluting global space Enables private variables/functions
IFFY (function() { doStuffAndSoOn(); })(); Function Expression = Anonymous Function
Definition Brackets Function Invocation = Invoke (Brackets = Function)
IFFY in the wild #1 (function(window, document, undefined) {'use strict’;
/* Angular.js defined here */ })(window, document);
IFFY#1 - the point in doing so var undefined =
‘defined’; /* evil code */ var o = {}; if(o.prop === undefined) { /* dead code */ } (function(undefined) { var noPollution = ‘solar-energy’; /* not leaked globally */ if(o.prop === undefined) { /* works */ } })();
IFFY in the wild #2 (function( global, factory ) {
factory(/* … */); })( typeof window !== "undefined" ? window : this, function( window, noGlobal ) { /* jQ defined here */ } );
Namespaces \Human\Brain\Memory vs \Computer\Mainboard\Memory Human.Brain.Memory vs Computer.Mainboard.Memory
Namespaces // sane (i.e. with namespace) window.Human = window.Human ||
{}; window.Human.Brain = window.Human.Brain || {}; window.Human.Brain.Memory = something; // or window.Human.Brain.Memory = window.Human.Brain.Memory || {}; // global (i.e. no namespace) window.Memory = something;
Namespace in the wild #1 goog.require('goog.dom'); function sayHi() { var
newHeader = goog.dom.createDom('h1', {'style': 'background-color:#EEE'}, 'Hello world!'); goog.dom.appendChild(document.body, newHeader); }
Namespace in the wild #2 d3.map = function(object) { var
map = new d3_Map(); /* … bla foo */ };
Objects i.e. Classes
Objects “Classes” are Functions The Functions are the Constructors Every
Object has a Prototype (i.e. is an Instance of a Prototype) A Prototype is the recursive list of methods an object has
Objects var Car = function() { /*this is the constructor*/
}; Car.prototype.drive = function() { /* a ‘method’ */ }; var Ferrari = function() { /* this is another constructor */ }; Ferrari.prototype = new Car(); /* Ferrari inherits Car */
Closures i.e. doing some magic with variable scopes
(function Outer(g) { var string = ‘Hello, World’; function Inner()
{} Inner.prototype.getPrivate = function() { return string; }; g.Inner = Inner; })(window); (new Inner()).getPrivate();
Gottchas JavaScript doesn’t like you. Face it.
var a = 2; function test() { console.log(a); var a
= 5; console.log(a); } test(); // Output?
var a = 2; function test() { var a =
undefined; console.log(a); a = 5; console.log(a); } test(); // Output?
Hoisting var a = 2; function test() { var a
= undefined; console.log(a); a = 5; console.log(a); } test(); // Output: undefined 5
var a = [“a”, “b”, “c”]; for(var i =
0; i < a.length; i++) { setTimeout(function() { console.log(a[i]) }, 10); } // Output?
var a = [“a”, “b”, “c”]; var i =
0; for(; i < a.length; i++) {} console.log(a[i]); console.log(a[i]); console.log(a[i]); // Output?
var a = [“a”, “b”, “c”]; var i =
0; for(; i < a.length; i++) {} console.log(a[i]); console.log(a[i]); console.log(a[i]); // Output: c c c Context
node.js server side JS Google’s V8 going to kill PHP
in 2012 not the first server side JS
node.js
node.js Slideshows suck.
None
JavaScript for PHP developers
JavaScript
JavaScript return this;