Tip:
Highlight text to annotate it
X
MALE SPEAKER: Hello and welcome to GDL-IL, GDL Israel.
Today we are very lucky to have with us Shai, who is an
Angular expert.
And Shai will basically talk with us about his personal
experience with Angular, and what are a few of the cool
things that you could do with it if you
are a front-end developer.
We'll dive in to a few of the strengths, and hopefully
weaknesses, of Angular.
And we'll see why it's so exciting to work with, and how
you could improve your best practices and work with
dependency injections, with test-driven development, and
other good old buzzwords that actually work with Angular,
and getting out there and gaining more and more momentum
in the community of front-end developers.
So without further ado, maybe I'll get Shai to explain us
first about himself and a short bio of his experience.
And then we'll dive into a few slides about Angular.
Sounds good?
SHAI REZNIK: OK, so hey, everyone.
I'm Shai.
I'm a front-end developer a few years now, and a lean
startupist.
I've been managing two groups, one called JavaScript Israel
that gathers front-end developers around JavaScript.
And it's a meet-up group.
And we do free event to share knowledge.
And another group that's called Talking Lean, where we
talk with entrepreneurs about their lean startup
experiences.
MALE SPEAKER: We'll have footnotes after the show with
all the links.
So don't bother to write anything down.
SHAI REZNIK: And yeah, I've been working with Angular over
one year now.
And I transitioned from other frameworks, like Ember and
JavaScriptMVC, and played around a
little bit with Backbone.
And I came from Flex, the Adobe proprietary technology.
So it was a hard transition back to JavaScript, because I
started with JavaScript before the jQuery date.
And then I found Angular.
MALE SPEAKER: Luckily for you.
SHAI REZNIK: Yeah.
And after a lot of frustration, and a lot of
playing around with different feature of every framework,
Angular just hit home for me.
And I never looked back since.
MALE SPEAKER: Great.
Maybe we'll just jump for the few slides that you prepared.
And we'll take it from there.
So feel free.
Now they are seeing the screen, I could
make it even larger.
SHAI REZNIK: So these slides are based on an introduction
to Angular meet-up we had.
It took about two hours to give an
introduction of Angular.
You can find it.
If you search for Angular Hebrew on YouTube, you will
find this lecture.
And this is just a brief overview of the framework.
So a few facts.
It's created by Misko Hevery, one of your guys, in 2009.
And after that, joined by other developers from Google.
And they formulated it into a 1.0 version.
It's unique features are directives and dependency
injection, which I explain furthermore.
It's powered by Google, so it's a good thing.
And I don't think it's GitHub updated data now, because it
was two months ago.
But I think it's way past Ember by now.
It has a production stable version, a lot of community
around it, good community that contributes every day.
So it's a good sign that it's healthy and keeps growing.
It's used by a few large companies--
I personally consult to a very, very large company now
that migrates to JavaScript from an older technology.
And we use Angular to do it.
And they have great videos, not so great
documentation now.
But they're great videos of Misko and his friends about
the subject.
So a high level overview of the architecture of Angular is
that you have the front--
I like to think of it like the human body.
So you have the views which are your sensors and voice,
and how you look and such.
And the views contain a unique feature of Angular that's
called directives.
It also contains filters, which can filter data.
And they combine inside the template, which is basically a
plain old HTML.
Each part of that template of the HTML you can wrap it
around with the controller, which basically means that it
is a mini-brain of that particular element, which give
it a link to the big application which lies in your
services layer, which is the big [? overmind ?]
brain that's knows all, and knows how to connect to your
server and such.
And that way you have a clean, nice architecture that you can
plug stuff out and put stuff in.
And all you have to worry about is your mini-controller,
mini-brain.
And it's supposed to be very, very, very light.
So a word about templates--
so like I said, it's plain old HTML, no special template
language other than the directive, which is a big, big
part of Angular.
And their job is to be declarative.
You declare what you need on your HTML.
And then the Angular just knows how
to tie things together.
In your controller, no imperative logic is allowed.
And it's very good for content security policy if you build
Chrome extension and you have this limitation with
handlebars that I got to using Ember.
In Angular, you don't have this limitation.
MALE SPEAKER: One thing that I might add is for developers
that are following and wish to see how it will be to develop
to the web in the near future, actually Angular give us today
the ability to do so with declaratives, because
declaratives are quite similar to what we are going to have
in the near future as web components.
And it's a very, very cool way to have encapsulation, which
we're lacking in the web.
I mean, we had it with iFrame.
But it's not on the web, and it's quite cumbersome.
But here we have a really nice, thin layer that enables
us to have dynamic HTML.
So it's more suited to web apps.
SHAI REZNIK: I heard Misko talked [INAUDIBLE]
a compliment that someone said that the HTML6 is probably
called AngularJS.
MALE SPEAKER: Yeah, that's a good one.
SHAI REZNIK: Like [INAUDIBLE]
said, it's in the HTML.
It gives you a way to have a domain-specific language, to
call things not by divs and such.
But you can call it like you want in your business, like
thumbnails or a model window, and stuff like that.
You have components.
And you have containers that you can contain other
directive or HTML inside them.
It's really, really good for a don't-repeat-yourself
principle, a reuseability.
And it's similar to MXML, if someone here
still works with Flex.
So the way they communicate is via the scope.
So a scope is a really, really interesting animal that
Angular brought to the table, because it's unique because it
allows a clear separation between the
view and the logic.
And the logic lies inside the controller.
And the view and the declarations lie inside of the
HTML and such on the template.
And they communicate using a special
object called the scope.
And everything you want to be rendered on your view you
attach to the scope.
And you put an expression in your template that knows how
to watch the scope and renders accordingly.
And every logic that you want to enable on your view, you
just set a method.
But it's not really a method, more like an event.
Because if you misspell the name, you don't get an error.
And it knows to correlate to the method on that
controller's scope.
So it's an object that lies inside the controller which
Angular knows to set the communication with the view
automatically.
MALE SPEAKER: I guess basically the magic of the
two-way data binding is happening here.
So that's exactly the explanation that you give.
And one of the nice ways that you can see it-- and we'll
have an example later on--
is that this "magic," quote, unquote, is done for you.
So when we're saying something like two-way data binding, the
beauty here is that, one, if the user is changing the data
in the view, the controller through the scope object will
be updated automatically for you, and vice versa.
So everything that you will want to drive from the service
side to the client will be done in this way.
And we'll show you an example of that.
SHAI REZNIK: It saves you a lot, a lot of boilerplate code
that you used to do in jQuery, playing with jQuery, when you
attach callbacks and write the specific DOM manipulation to
do such and such when an event occurs and such.
And it reduces all this boilerplate.
So controllers are the mini-brains, like I said.
It's more like a view model not a [INAUDIBLE] or
presentation model, if you're familiar with the old school
MVC definition.
You have a lot, a lot of MVC definition nowadays.
So it can get quite confusing.
So it holds the special scope object.
And responsible for the view data presentation state and
reaction behavior.
So it's also responsible for setting initial values, like
if you want default values to be displayed on the start.
And it's the glue between the view and the services.
So it's like a mediator between the truth that we'll
talk about in the service layer and your template.
So it's like you can filter stuff out, depending on the
specific control.
So data binding we already discussed.
It's really, really helpful, and saves you a lot, a lot, a
lot of boilerplate code.
The service layer, this is one of the things that I really,
really, really enjoyed when I first learned about Angular.
And I didn't really see it as a standard in other
frameworks.
So when I practiced Ember or JavaScriptMVC, I needed a
place to hold stuff that aren't really models and such,
just different pieces of logic that I need to encapsulate and
to abstract in ways different and to reserve the singular
responsibility principle, which if you know the
[INAUDIBLE]
talks about clean code and such.
So Angular introduces it right inside the
framework as services.
So services are pieces of single tones that Angular
manages for you.
And it allows you to inject them to every single component
that you need inside of Angular in a really easy way.
You just declare it by name on the function that calls your
controller or other services and such.
And you just get the single tone.
And it really, really, really simplifies your architecture,
because you don't need to maintain all the different
instances that lies around your application.
And it's also very, very good for testing, because as you
know, we should test our application more.
And we should need more unit test.
And we don't do it usually because it's hard.
It's hard in JavaScript still, because even with all the
frameworks, it's still not that easy to set a proper unit
test up, especially if you don't have that the thing
called dependency injection.
You need to instantiate it.
And you need to configurate.
And it makes life really, really hard.
And you have deadlines.
So you need to follow the deadlines.
And you just drop the test.
So it makes your testing life really, really easier.
And it gives you the ability, instead of inherit from other
classes, like a typical prototype inheritance, you get
the ability to add mixins of stuff.
If you need an ability to call a server, you just inject the
HTTP service, or another custom server that you created
with an abstract layer above it.
You need a way to manipulate some depth and some specific
business logic.
Just inject the specific service and use it.
And you have this ability.
You don't need to inherit from anyone.
And it's really, really helpful, and also protects
[INAUDIBLE], because you divide your
code into small modules.
So the modeling in Angular is native JavaScript.
You don't have a special model object--
just arrays and objects and what you know.
You have specific services for communication with Ajax, and
more optimized for REST.
And probably we'll see an example later, which is called
the q, which basically is the promise, HTTP, which wraps
around a native Ajax of JavaScript.
And we have the resource, which
communicates with REST resources.
So Angular, in that sense, is optimized for promises.
So also, promises is a concept that really also makes your
asking life easier, because it removes all the callback
pyramid nightmare.
And it allows you to pass along objects
and work with objects.
But Angular still doesn't have a proper solution for entity
management, or persistent management.
Because if you have a difficult service side model
or complicated--
sorry--
so you don't have a really good way now to handle it
natively inside of Angular to declare
dependencies between entities.
And you have a user which [INAUDIBLE], and I don't know,
have comments, and blah-blah-blah.
You don't have a really good way to declare it and to
manage it properly.
So you have third party libraries like [? with JS, ?]
which as for now, I think, it's probably the most
comprehensive or the biggest solution now.
But still, I find it hard to work if you don't have .net--
MALE SPEAKER: [INAUDIBLE].
SHAI REZNIK: No.
Server, backend.
And I still would love to see more support for Java and
other backends for better integration.
So dependency injection, I already discussed.
It works really, really good.
You have a lot of helper methods to declare your
injectables.
And Angular knows how to create a provider for them.
And the other topics we already discussed.
You have also the concept of filters, which basically, in
Angular, transforms input.
It also sorts.
It also filters stuff out.
It transforms your input into something, like plain text
into uppercase and such.
And [INAUDIBLE]
that way that you can inject inside of different templates,
which aren't really supposed to be inside a specific
[INAUDIBLE].
A good example for that is localization.
Localization, when you need to render a text according to the
locale that the application is using.
Filter is really, really, really a good
solution for that.
It saves you a lot of code and ins and outs, and
blah-blah-blah.
So this is about filters, testing.
I already mentioned about Misko who came from a testing
background.
He has a lot of lectures about the subject.
He wrote it with testing in mind.
And they wrote an extension above Jasmine, but with
important Angular helpers that gives you the ability to
simulate the dependency injection, and give you
injection on the fly in your test, if you need it.
And you don't have to instantiate anything and such.
Also, I need to update it, because it's
not Testacular anymore.
It's Karma.
They finally changed their name.
And if somebody's interested in the subject, you have a
good resource and a very wonderful site that's called
Yearofmoo that is known for its very, very long and
thorough posts on different subjects,
and especially Angular.
So testing, really easier than any other framework--
MALE SPEAKER: I think it's one of maybe the
strengths of Angular.
And as we all know, usually projects start low when timing
the scope, but quite quickly becoming larger and larger.
And if you want to be on top of things and make sure that
you are able to move with them quickly, testing is one the
must-have things.
That's result date.
SHAI REZNIK: Really, really brief, I won't get
into it very deep.
It's just my experience.
It's not like a fact or something like that.
Why I found Angular so good.
And you have an asterisk on the side of Backbone because I
didn't really use Backbone that much.
I only did a small POC just to find out how it works.
And so in case of the most important features that I
looked for in terms of stability and reliability,
clear structure, which Angular was the only one that provided
me the services, as I mentioned
before, and the clear--
it made be ask less questions about which stuff goes where.
Testing is also--
I don't know how it is with Backbone.
I believe it's good.
But with Ember, I had a lot of headaches with it.
Lazy people oriented, which is my personal favorite, because
I want to be as lazy as possible, Angular really,
really gives me that with dependency
injection and bindings.
Which also Ember is more towards this with their
bindings and conventions over configurations.
A strong community, really, really, really important.
JavaScriptMVC, if anyone hear this or listen to this and
considers JavaScriptMVC, don't.
Learning curve.
In terms of learning curve, Backbone is
really, really small.
So it was really, really simple to understand.
But it's really small.
You don't get a lot of the stuff that you get with
Angular and Ember.
You need to plug in stuff from third party libraries.
And you have a million you have to
choose from every where.
So Angular gives you that really, really ease.
But the learning curve of Angular and Ember
is still not optimal.
Because Angular, if you want to do basic stuff, simple
stuff, render something on the screen and have two-way
binding, all the examples on the main site of their
website, it's really, really easy.
But when you start and want to create more complicated
directives or want to handle other stuff, you need to
really understand what is the life cycle and how the
workflow works, and need to grasp really, really key stuff
that the documentation isn't really good at.
And in those terms, I think it's worth it.
It's worth the right, if you consider Angular.
But you need to give it its time, really give it
time to sink in.
And once you get it, you run.
You run forward.
And you just have all the tools that the strong
framework can give you.
So in terms of the other stuff, expandability and play
well with others, I found Angular really good.
Size also is not that meaningful.
And performance, although it's debatable in comparison with
Ember performance, they're really improving stuff with
every version.
So that's it, a brief overview.
MALE SPEAKER: Excellent.
And maybe we could definitely get the screenshot out.
Do we want to share--
let's see here.
We have two nice, quick examples that we could run on
the code and just show stuff.
SHAI REZNIK: You want to share it?
MALE SPEAKER: Yes.
Let's share this screen again.
And it's this one.
Let me try and make it even bigger.
So please, feel free.
SHAI REZNIK: So we can see a really, really basic example
of the resource service as I mentioned before.
So its job is basically to wrap around a resource, a REST
URI, and to give you a simple way to handle it
object-orientedly.
So you define your URI.
And you get your different method.
You get four or five methods for free.
You get Query and Post and Sort and
Create and Get and such.
You can read more.
We can open also the documentation.
MALE SPEAKER: Yeah, we'll have the link in the footnotes.
SHAI REZNIK: And then you get an object.
Once you get that object, you can perform
different actions on it.
And you get a lot of work done by Angular in the background
that goes to the server, fetch the JSON, the response.
MALE SPEAKER: Building the object in the scope.
SHAI REZNIK: Yeah.
Building the object in the scope.
And then it creates--
in every object that you get, you get an instance of that
research that you defined.
And you have the ability to perform actions like update
the JavaScript object.
And you have a special method that's called
[? dollar-save. ?]
And then you save.
And it's also Angular from behind the scenes, goes to the
server, and updates what needs to be updated and such.
So this is just really, really quick.
It shows you a really, really simple fiddle that shows you
how you can search Twitter by their public API using JSONP
for the response.
And you get the Twitter results as a promise, like I
mentioned before.
And when you get it as a promise, Angular knows how to
render this promise automatically, again.
MALE SPEAKER: And it will show the template that will take it
and show you [INAUDIBLE].
That's actually pretty cool.
Maybe you take it from the top, just to explain to the
ones that never saw an Angular app.
The first time, we're just declaring [INAUDIBLE].
SHAI REZNIK: So you need to pick your scope when you
define an application.
And usually it's on the HTML.
But you can define it on any element you want.
And that element and boundwards will be inside the
Angular ward.
So you give your application a name, in this case Twitter.
And you have the concept of controllers,
like I mentioned before.
So you give your control a name.
And then here, they just declare it as a global
function, which Angular knows how to pick up.
But usually [INAUDIBLE]
calling your application [INAUDIBLE]
Angular application.
And [INAUDIBLE]
once you declare it, you have a reference.
And you have helper methods.
[INAUDIBLE]
the controller method.
And it's the same [INAUDIBLE]
due to the [INAUDIBLE]
controller.
[INAUDIBLE]
and not as a global function, because this is polluting the
global scope.
MALE SPEAKER: But usually we'll try to maybe encapsulate
it in some global environment that will include everything
that we do in the app itself, right?
SHAI REZNIK: Yeah, you have the option of also declaring
it as a global scope variable.
MALE SPEAKER: For the app itself.
SHAI REZNIK: For the app itself, and then you can
attach stuff to it.
I personally prefer the whole longer version.
Also, they pollute the global scope as less as possible.
So here, once you declare the [INAUDIBLE]
controller, you get a wrapping around your div here by that
controller.
And each variable or reference that you defined under this
div, under this HTML elemental or DOM element, get
automatically watch expression that watches this scope object
of your controller.
And here is the example that once you get the Twitter
results, you get it inside of Twitter result and inside of
result property.
And once you get the result property, which basically is
an array, you get free Angular directive, called Entry
Repeat, which lets you declare just a DOM element that you
want to be repeated.
And you get an instant scope.
So inside of that element, you get a reference to the
specific instance of the iteration.
And that way, in each iteration, it will render the
different texts that came back from Twitter,
here in this example.
So you get iteration over the Twitter results, which once
you called Twitter results, it came back with an object, with
a result property, which is an array.
And then it's really, really as simple as that, just
declaring a watch expression that watches your specific
instance of the--
MALE SPEAKER: It's tracing the array, right?
SHAI REZNIK: What?
MALE SPEAKER: So basically we got here a free iterator that
will go over the array and will render each sale as a
tweet.text.
And we could put tweet dot time and date, whatever, all
the other parameters that we have here for free.
So that's basically what Entry Repeat give us, right?
SHAI REZNIK: Yeah.
It's specific for each instance, and just common
behavior that you want to render arrays in.
So you get everything.
It's really look how much lines of code.
It's really, really, really simple.
And you just can search for--
I don't know.
MALE SPEAKER: Angular.
SHAI REZNIK: Angular.
And once it come back, it gives you the results.
Really, really, really simple, really easy.
You get it with your ngResource.
MALE SPEAKER: Great.
So I think in matters of time, we covered most of the things
that we wanted.
If there are any questions now on the chat or
just live, feel free.
And if not, we'll wrap it up.
And hopefully you'll be able to join us in the future to do
a followup, and dive deep to other subjects
that we cover briefly.
SHAI REZNIK: Of course.
I'll be happy to.
MALE SPEAKER: Excellent.
So do we have any questions?
If you wish, this is the time to ask them.
Cool.
So thank you very much for being with us.
And we'll see you next week on Wednesday,
2:00 PM Israel time.
Thank you very much, Shai.
SHAI REZNIK: OK, thanks.
MALE SPEAKER: Bye-bye.