Moving from PHP (or any other programming language) to Javascript


– So, we’re here at Prismic Studio. We did a video, previous to this one where we talked with Sarah from Algolia. We talked about your journey
to become a programmer. It started with CSS. You went to journalism, you
came back to do some Flash and suddenly it’s PHP,
you started doing PHP and CSS and HTML. And then you went to JavaScript. And then I had this question that if someone is moving
from another technology like imagine, from PHP
or maybe something else into JavaScript, what do you think what are the things that
they will stumble upon that will kind of will be hard maybe for them to learn when you
get into the JavaScript world and –, how to think about it? How to handle that complexity, all that new thing that they
learned about JavaScript? Do you have these kind of
experiences that you can share? – Yeah sure, and I feel
like JavaScript is really one of a kind language, because it has many
concepts baked into it. And it’s like one of the
most popular languages that uses prototypes. Like it’s not the only language, but it handles it in a very specific way. And it’s definitely the
most popular language, amongst the prototype-based languages. And for people coming from PHP, Ruby, Java, it’s really baffling to see how JavaScript works. How it handles objects. I feel like when you’ve been
doing object orientation with those languages for a long time, you tend to think, “Okay classes are the only
way to do object orientation.” This is actually not true. You can do it in a different way. And if you really want to leverage JavaScript and to use everything it has to offer, it is necessary that you really
step out of what you know and learn to embrace that new language. Because if you try to
replicate what you know, you can do it, it’s true. It’s really easy to mimic classes with JavaScript. Especially today you even
have a keyword for that. And it’s really easy to do. But… I feel like, Let’s say tomorrow I want
to learn some Haskell. And I’ve been doing object
orientation for a while. Then I’m going to dive into a new language that has nothing to do with it. And if I’m going to do
some Haskell or some Scala, then I’m interested in
functional programming. And I should learn what
is functional programming and what it’s going to help me do. And so I think it’s the
same with JavaScript. You have to first recognize
why are you doing JavaScript? Why do you want to learn JavaScript? What is it going to help you with? And then from that accept that
it is a different language and that it has different
ways of solving problems. And so yeah there are many, definitely the first
thing to really dive into and there are plenty of
courses out there to help you would be to understand the difference between classes and prototypes like, how you instantiate objects, either with classes or prototypes. How it’s different, what is the prototype chain? What it helps you do? Understand that there is
no such thing as a class in JavaScript or prototype-based
languages for that matter. That also that JavaScript is highly… based on functions that functions are first
class citizen in JavaScript. And that it is extremely
powerful that you should use it. – And that we’ll dig more into but first thing you said that it’s not exactly class-oriented. It doesn’t have classes even
if you have the word class. – [Sarah] Yes. – It’s still… objects they, you create in run time. – [Sarah] Yes. – They have prototypes
– [Sarah] Yes. – And you can still modify
them in run time as well. – [Sarah] Yes. – And you talked about what you called a prototype chain, right? – [Sarah] Yes. – And that is maybe a lot of people argue that that is the real object orientation. – [Sarah] Yes. – You know, objects exist in run time. They don’t exist in only in design time, they exist in run time and
they behave differently and they change dynamically. And JavaScript actually embraces
that to the extreme, right? – Yes. – You know, they are run time. – Yes, absolutely and I remember reading interviews of the creator
I think it’s Brendan Eich, I don’t know if I pronounce it well, but he really got interested in LISP that is also prototype-based
to do JavaScript. And yes, in a way that’s kind of
the purest form of objects. Because in prototype-based
languages you have only objects. That’s the only thing that you have. And your prototype is an object in itself and you can modify it and you can modify the entire prototype chain. So that’s an interesting concept. That’s really mind-boggling
when you don’t come from that because it feels like the only
way of creating an object, or what you think of an object,
is doing it with a class. But there are many ways to look at it and prototypes are really valid and arguably, I’m not really into the debate of is it the real object
orientation or not the real, I think– – That’s a subject of debate anyway. – Yeah. – Everyone have his own opinion. – Yes. At the end of the day I
feel like the principle and the paradigm is the same and it helps it solves the same kind of issues, so it does not really
matter what is the real way or the not real way, but – Very true. – Yeah, what is interesting to understand is that every language is built in a way that if you embrace it
you’re going to also benefit from all the optimizations that the engine is doing in the back. – Oh yeah, that’s…
– And if you can – Whereas if you fight it – Yes. – Then you’ll have that performance of– – You might. – Yeah you might, yes. – At least you might and you’re
also not going to benefit from all the things that
the language has to offer. And yeah I feel it’s
like when you’re learning a foreign language. Why try to apply your
grammar, your conjugation on a language that has
nothing to do with it? – That’s probably the worst
thing you can do, right? – Yes. Yeah. – But you know for myself,
I know I should admit I haven’t been coding
for like maybe two years. So I’m rusty on that. But anytime I had to use JavaScript, I tried not to touch to prototypes. I tried to use JSON as structure and use it as a functional
of programming, is that okay? – Yeah, I think it is definitely okay. Because functions are first
class citizen in JavaScript and that’s actually really powerful. – That’s the thing I guess that moved me that made me write some JavaScript. Because I had this image
of JavaScript being a very, let’s say my image of JavaScript was that, “Okay, it’s a language that’s
not very well defined.” And it’s a messy language inside because things behave
in sometimes weirdly. And coming from a language I
used to do C# and then Haskell and I was like very used to languages that are very well defined,
I was scared of JavaScript. But when I learned that
there are functions that was, well at least we have that. And that’s very productive right? Using functions. – Yes, and I think you’re right. It’s not a language that is well defined the way that a language
like C# is defined, or even Ruby for that matter. You can do many things, it’s a multi-paradigm language. It does not really impose anything on you, it has mechanisms but
then you can really do any style that you want. And I feel like that
can be scary sometimes, especially if you want to use JavaScript in big scale projects
because it may feel like, “Okay, I’m maybe not
doing it the right way.” But functions are to me,
definitely one of the strengths of the language. Because you can do
anything with functions. – It allows you to develop
something like jQuery as we said. – Absolutely. – Which is extremely declarative. This is something that’s very hard to define
in any of the other language if you don’t have any functions. Like, I’m waiting until the parent loads until that very element,
and when it happens, I’m going to execute this code
that will take that element that I’m talking about
and do something to it. It’s extremely declarative. And that would have been
very hard to do, actually if you had to do it imperatively So I think it’s uh, functions… make JavaScript as
powerful as it is, I guess. Maybe if I had one thing, I don’t know, maybe JSON and functions are
the bars of JavaScript, right? – Yes, and I feel that
one of also the strengths of JavaScript is that it
doesn’t have too many concepts. It has a set of primitives,
then you have your objects, your arrays, your functions and that’s it. And you have those basic building blocks, you don’t have all those
more high level concepts that you can find in many other languages. Like in Go you have many
many different parts. And many primitives and many concepts that you should use in
a very specific way. With JavaScript, you have
a quite limited toolset and then you can do
basically anything with it. And it’s actually liberating because then it is not really
imposing something on you and you really have the freedom
to be extremely creative. And I feel like functions for most things that you want
to do are more than enough. You can instantiate objects
with factory functions. – Yeah. – You can run a callback
– Exactly. – You can do anything. – Yeah, maybe that’s the primitive that allows you to maybe, also implement a lot of paradigms. – Yes. – Including object orientation
and modules and all of that just with functions.
– Absolutely. – People already do it, right? They have this kind of function, when they run that function it gives them different functions that they
defined inside that function and so on and so on, so. People use functions as modules as well. – Yes, absolutely. And because you can do
whatever with a function, you can pass it to another function, that’s definitely something
that you should do. Like, in React that’s
also the very principle is to use functions and to
pass it to other functions. And that’s extremely powerful. – So now you learned JavaScript, right? And you went into, “Okay let’s… “understand the language as it is “and you know “try to rather embrace it “instead of trying to imagine
it as something else.” And then you went into I think, learning the different
frameworks out there. How was that? I mean it’s huge you know, compared
to any other language. It’s huge, there’s so many
libraries appearing every day. It’s very hard to focus. How was your journey
learning different frameworks for JavaScript? But do like, I don’t know,
what’s your experience? What’s your advice to people
that are going in that path? – So to me, it was actually a bumpy road because I started learning Angular, like AngularJS. Probably a couple of month
before it was decided that it was obsolete and that Angular 2 was going to replace it. And that it was not even a major version, it was a totally different framework. So I invested a couple of hours into AngularJS before realizing, “Okay, that knowledge is
going down the drain.” And back then, yes it was such a jungle. You had Backbone that was becoming popular or already popular. Angular of course was the big dog. And… Then all the thing, like you
had a lot of small things. And I remember that I ignored it for a long time and I really focused on
what I was already doing. And then it started to stabilize. And you had basically one out
of three big contenders today. You had Angular 2 (Angular 2+), React and Vue. And so at some point, I had to learn one. And you had to make a choice because I remember at some
point it was really popular to do benchmarks of which
one is the most performant, which one is the best, etc. At the end of the day,
it’s really the same. The performance differences are so small that it does not even matter. They work well. All three work well, they are done differently, they have a different
philosophy behind it, and that’s what matters. But they work the same,
they accomplish the same, like they solve the same problems. They’re simply different solutions. So when you’re past that, it’s more, Okay, what feels more natural to me? And what makes more sense for my business? What do my team already knows? – So what decision did you take? – So what I did, so I was not really bound
by a company choice. It was really for me to learn. And so what I really liked
with the documentation of Vue. When I looked at it was that it was, like the message was: If you already know HTML,
CSS and Vanilla JavaScript it’s going to be extremely easy, basically you kind of already know Vue. I was like, “Okay, let’s see.” And what I did is that I took a full day to read the documentation,
like from A to Z. And it was absolutely stellar. The documentation of Vue is excellent. And on Day 2, I started
building something. And the experience was awesome because you know when you’re using an iPhone, the idea behind an iPhone is that you don’t have to read the manual. Everything is built in
a way that is intuitive, you know that if you swipe left you have the feeling
that if you swipe left it’s going to do something
and it does that thing. It was the exact same with Vue. After reading the
documentation I was like, “Okay, I feel like I should put this here “and it should do that.” And actually, it did that. And so that’s what I
really liked about it. Is that it was coming from my background of knowing the technologies
that I knew was already a plus and it was already
helping me understand it. And I think it was designed
in a way that makes it extremely obvious and
simple to get started. And it’s really different… There are many many
similarities with React. But React is a lot closer to JavaScript to the end result, basically. When you’re writing React
code, it looks a lot like pure JavaScript.
– Pure JavaScript. – With Vue, yes you have
a templating language and you have a very structured way of creating your component. So it’s totally different
and I know that many people really don’t like too many abstractions, they want to be closer to JavaScript also because they learn more. But I feel that it was really
interesting to have something that already took a lot
of good decisions for you and is giving you an actual
framework and telling you, “Okay, you wanna do that you
should put that code here, “that code here, and it’s going to work. “And we already thought about it for you. “So you don’t have to
choose what kind of loop “that you want to do, we
already optimized that for you “we built that abstraction
and here it is.” And I think it’s really
empowering when you know what the problems are and you
just want to build something. And it’s going to work and
the code is going to be really easy to come back
to in a week, a month or even a year. And you’re still going to understand it because it’s built in a very standard way. – Right, maybe that’s also
why we started investing a lot into Vue and Nuxt for that purpose. Is that learning curve is you feel that you’re
just augmenting your HTML with components instead of like, doing everything from scratch. You write things the way
you want to write them and then you say, “Okay now I
want this to be a component.” And it just you know, it just works. As you say, it just works as expected. So most things you already expect that they should work in a certain way. And since… you know now a lot of our users
come from other communities. Maybe they come from PHP and they want to do a website and they want to choose a component based, Vue and Nuxt are a good path for them because the learning curve is that way. But as you say, and I like
that advice that you’re giving. Here is that if you’re more about knowing exactly what’s
happening and you know closer to JavaScript, then maybe React is a
better choice in there. – Yes and I’ve had a lot of
conversations with colleagues about that, like Vue versus React. And I feel like at the
end of the day, yes. If you really want to get
a lot better at JavaScript and you want to learn
better JavaScript patterns and really deepen your
knowledge of JavaScript, I think React is a good option, because you’re going to be
really close to end JavaScript. And you really have a lot of freedom. You build your components as functions and you pass them to other functions. And the way of managing the states is… more complex. Not to say that learning
Vue is not going to help you improve your JavaScript. It’s definitely going to
help you better understand what you’re doing, but in a different way. And I feel like when you’re making a Vue app, it’s really because you want
to get something to work. You want to create a UI
and you want it to work. But React is going to lead you to… – Dig deeper. – Yeah, to dig deeper
and to specific patterns. Patterns that are specific to React. And that’s also I think the strength and also maybe the weakness of React. Is that it has so many concept that the learning curve is steeper. – Right. – So usually you have
those comments about, “Oh yeah, React is for
real JavaScript developers, “advanced JavaScript developers,
and Vue is for beginners.” I don’t think this is
true, I think it is easier if you really have an
advance knowledge of React – –, an advanced knowledge in JavaScript to get into React, because
it’s going to be easier for you to learn new concepts.
– The different concepts. – Yes. But those concepts are not
necessary to build a UI. That’s what I’m saying. – You can build in both,
in both technologies you can build very advanced UIs. – Yes, you can do exactly the same thing. There is not something
that is available in one that is not available in the other. You can do exactly the same thing in both. But in one, the complexity
is much more hidden, which is what I believe to be a strength. Because I do not need to see it. I do not need to be playing with it.
– Right, aware of it and think about it.
– Yes, and that’s why I think frameworks exists. It’s because you want to
abstract all the things that we already, like when
you do a Rails application, you don’t want to handle routing, you don’t want to handle authentication. All that stuff that’s
always done the same way, you do not want to see it. You want it to be built well, you want a nice interface that
allows you to hook into it, and that’s it. But you don’t have to look into it, and I think it’s the same for UI. I don’t want to necessarily… manipulate and touch reactivity myself, I just want an engine, a
reactivity engine that works. And be able to just change
the value of a variable, or push something to an array, and know that every piece
of DOM that relies on it is going to update.
– Update on that case. Okay, well that was very
interesting, thank you very much for this.
– Thank you. – For your experience.

Leave a Reply

Your email address will not be published. Required fields are marked *