Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

JavaScript for PHP Geeks

3:02:08

What you'll be learning

This tutorial uses an older version of Symfony... but since it's a JavaScript tutorial, the concepts are still ? valid!
// composer.json
{
    "require": {
        "php": "^7.2.0",
        "symfony/symfony": "3.1.*", // v3.1.10
        "twig/twig": "2.10.*", // v2.10.0
        "doctrine/orm": "^2.5", // v2.7.1
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.2
        "symfony/swiftmailer-bundle": "^2.3", // v2.4.0
        "symfony/monolog-bundle": "^2.8", // 2.12.0
        "symfony/polyfill-apcu": "^1.0", // v1.2.0
        "sensio/distribution-bundle": "^5.0", // v5.0.22
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.16
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.2
        "friendsofsymfony/user-bundle": "~2.0@dev", // dev-master
        "doctrine/doctrine-fixtures-bundle": "~2.3", // v2.4.1
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.2.1
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "friendsofsymfony/jsrouting-bundle": "^1.6" // 1.6.0
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.1
        "symfony/phpunit-bridge": "^3.0" // v3.1.6
    }
}

You already know and write JavaScript... or really jQuery. But as JavaScript takes on more of your life, it's time to take your game to the next level! In this tutorial, we'll do just that by diving into a bunch of pieces of JavaScript you may "kinda" understand, or which might be new to you altogether! This includes:

  • Event Bubbling & DOM Events
  • The DOM Element Object
  • JavaScript Objects
  • Instantiating objects with the prototype
  • Understanding the mystical "this" & .bind
  • Understanding Self-Executing Functions
  • Delegate Selectors will save your Life
  • Client-side templating
  • PROMISES!

Let's not just write JavaScript, let's understand what's going on!


Your Guides

Ryan Weaver Leanna Pelham

Buy Access

Join the Conversation?

40
Login or Register to join the conversation

Is there any aproximated release date ?

5 Reply

Not quite yet - it's a placeholder for the future. It could be in Feb, but not earlier unfortunately. But I'll take this as a vote to make it sooner rather than later :)

2 Reply

I like that! Cheers

1 Reply
Default user avatar
Default user avatar krabello | posted 4 years ago

Are you still planning to do this? :)

1 Reply

It's been a lower priority, but definitely :). Sorry for the delay - there's so much tech cover!

1 Reply
Default user avatar

I understand, thanks for getting back to me!

Reply
Default user avatar

Is this still relevant and up to date ?

Reply

Hey Robert,

Yes, it’s still relevant and up to date. But you may also want to look at JavaScript ES6 course to bring more features in your JS code. If you have some more specific questions - don’t hesitate to ask.

Cheers!

Reply
Default user avatar

I am waiting for this course. This is great idea.

Reply
Default user avatar

i cant find where to download the course files ?

Reply

Hey Hassan

You can download almost everything!
Course code, chapter video, and course script, but first you need to select a course-chapter, and in that section will appear a download button at the right upper corner

Cheers!

Reply
Default user avatar

Nice! Been looking forward to this one. Sounds like it could be similar to Kyle Simpson's You Don't Know JS books/workshops (which I recommend). Also excited about the Webpack/React videos. Added to the list of things to watch along side many...many...others. :(

Reply

Is this course really accessible for a really old JS developer, like, I haven't really touch JS for a loooong time (like, years), and I may be totally rusty ?

Reply

Hey Virginie,

Well, for those years probably exactly those changes (we're talking in this course about) had been made, so I think this course fits well for you. Anyways, I think you can manage it, so just try and if it's really hard for you - go to refresh your knowledges about JS in general first.

Cheers!

Reply
Default user avatar
Default user avatar Yan Yong | posted 4 years ago

Stopped at chapter 26, the promise chapters are pack of new information, it is too much for me. Everything else went really well though. Thanks guys

Reply

Hey Yan,

Good progress, well done!

Cheers!

Reply
Default user avatar
Default user avatar Faizan Akram Dar | posted 4 years ago

Our subscription is expiring soon in a week I suppose. Can you please release this course so that we can benefit from it.

Reply

Hi Faizan! Unfortunately, this tutorial won't be ready this week - it's low on our priority list. However, when we *do* release it, even if you don't have a subscription at that point, the script and code blocks are always 100% free. If you have any questions, feel free to message us.

Thanks!

Reply
Miloud Avatar

Hi team i want to buy this course, but there are subtitles ? i don't see CC with the first free video ? whyyyy !

do you have them please?

Reply
Miloud Avatar

Hi weaverryan i bought it anyway, did you have subtitles for videos please !

Reply

Hey Nacer

At the moment we do not count with subtitles for this tutorial. We are sorry for any inconvenience :(
Probably we will offer them in the future, but I can't promise any release date

Have a nice day

Reply

Hey Nacer!

Actually, we just added subtitles to this video. So, I hope it helps! We *always* add subtitles for new videos, but we don't typically add them for videos that were released before our subtitle system. However, we are happy to do it if someone asks.

Cheers!

Reply
Miloud Avatar

Diego Aguiar weaverryan Hi, thanks a lot,
personally, the subtitles helps me a lot,

good luck guys

1 Reply
Paweł C. Avatar
Paweł C. Avatar Paweł C. | posted 4 years ago

I don't understand. There are 3 series "JavaScript for PHP Geeks", Should I watch all three?

Reply

Hey Paweł Chry

They are related, specially about the project that's been built, but you don't have to watch them all if you don't want/need to. You can start at any course you want and just download *that* course code.
If you have any other doubt just let me know!

Have a nice day :)

Reply
Default user avatar
Default user avatar Shairyar Baig | posted 4 years ago

Looking forward to this tutorial.

Reply
Default user avatar
Default user avatar julien moulis | posted 4 years ago

O my dog... I'm lost 😂 I thought that I knew JS and Jquery enough... Well I guess No... I search on your courses a JS course for newbee, but It seems that there's none. So which site free or no, will you advise me to learn enough to get good enough to follow this course? And in the end becoming a knp ninja 😂
Thanks

Reply

Yo julien moulis!

Haha, yea, this is definitely assuming you're at a certain level and want to jump up from there :). I haven't gone through any beginner JS courses personally, but I typically really like Treehouse - this track might be interesting - https://teamtreehouse.com/t... - plus possibly some other specific addons :). I'm curious (if this question even makes sense) - which parts in the tutorial really started to get tricky for you?

Cheers!

Reply
Default user avatar
Default user avatar julien moulis | weaverryan | posted 4 years ago

Hey! My favorite teacher!!! There's not really a specific part. I spend more times to understand the jquery syntax than working on the api itself. As soon as I go back on my own app and then try to apply my thought new skill... then I go eating a cookie... Man I got fat!! 😂 No more serioulsy I think the oop jquery/Javascript and Promise killed me... but I'll be back... I realized how essential it is to masterize api/Ajax et tutti quanti.

Reply

Hahaha :) And hey back! Thanks for the feedback - the OO JavaScript and Promise stuff is definitely the hardest, and the Promise stuff is probably less important (you'll keep seeing it, eventually it'll sync in). Bonus: in the next tutorial about ES2015, we introduce the new class syntax - it's a "sugary" syntax on top of the "prototype object model" that looks *really* familiar to us PHP devs. You still ultimately should grok the prototype stuff, but that class syntax is a nice bridge to a place more familiar :).

Cheers!

Reply
Default user avatar

Waiting for this course !

Reply
Andrei V. Avatar
Andrei V. Avatar Andrei V. | posted 4 years ago

Great screencast, but why it takes it so much time to appear entirely? )

Reply

Sorry about that xdrew! We did hit a snag last week - not something we normally like to do! We'll try to be better in the future :)

1 Reply

java script and php , why not symfony and jquery ?

Reply

Yo Ahmed,

Actually, there's a Symfony framework behind this course, we just do not focus on it to make this course more PHP-framework agnostic. And Symfony topic is a separate screencast, even more than one screencast, and we have a whole track for this: https://knpuniversity.com/t... .

What about jQuery... well, jQuery is just library, which is a wrapper for some most frequently used operations, so no matter do you write on plan JavaScript, use jQuery on any other JS library - you still write plain JS code a lot! So do it in a right way is very important to prevent bad code quality at the end. However, if you start this course - you'll see many jQuery function calls in it ;) Btw, jQuery is a very simple straightforward library, which has the strong documentation on its official website.

I hope I answered your questions.

Cheers!

1 Reply
Toni Avatar

So, it's been more than 2 and a half years now... I suppose this isn't happening?

Reply

toniperic yep, shame on me for NOT getting to this. The problem is that this continues to be a really good tutorial and we are planning on doing it - but obviously, other tutorials keep taking priority. So this - along with other JS-related tutorials for backenders, like React, webpack, ES2015, etc - are on our mind - but not actually on the immediate schedule... yet

Reply
Default user avatar
Default user avatar s.molinari | posted 4 years ago

Will any certain client-side frameworks be used or discussed?

Scott

Reply

To be determined! What would you like to see? I'm initially thinking something that's framework agnostic (well, it would include jQuery) and talks about all the fundamentals above. Then, maybe another screencast(s) on Angular, though I don't want to duplicate other wonderful resources out there on that topic :).

Cheers!

1 Reply
Default user avatar

Personally, I think referring to Angular would be a mistake currently. It is being completely changed in 2.0 (with little to no BC, AFAIK) and any discussion on it would be outdated, as soon as 2.0 is released. You'd have to make it clear, the tutorial is referring to an Angular version 1.X and not 2.0 or higher.

http://eisenbergeffect.blue...

I like Backbone, because it is the least opinionated and one of the most popular frameworks out there. There are also a ton of tutorials available for it, but for the purposes of this tutorial, Backbone can also show a way to better organize client side code, thus, it could be used to demonstrate the code organization (i.e. maintainability) and testing parts (my wish:-)). And since it has such a small footprint, there is none of the overkill other frameworks have, especially since this tutorial isn't specifically aimed to teach how to develop an SPA.:-)

Scott

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!