We interviewed Eric to find out what he has learned about teaching front-end development for a living.
- Thoughts on teaching Angular
- Angular 1 vs. 2
- Teaching React
- Let the programmers program
It would be like teaching a Java class, for example, on Spring MVC. But you show up to class and nobody knows Java. This happens over and over and over again. It doesn’t matter who the training customer is. This is universal across the board.
You basically come into a class with a bunch of people who barely know ES5. No concept of ES2015. No concept of these other languages such as JSX. They expect to hit the ground running writing code with relative efficiency and ease right from the start. They quickly realize that there’s this entire ecosystem of programming they don’t even know exists. They really have no idea of the knowledge they don’t have. They don’t know what they don’t know.
That makes sense. Trying to learn the libraries/frameworks without really understanding the underlying language. What would you say are some other challenges?
What specifically about the large API catches people or is really hard for people to get at first?
Really it’s the tying of all of the pieces together. What’s a directive? When is it used? What’s a service? What’s a controller? What’s a scope? How do scope objects get bound to a template? How do forms work? When I set up something on a scope in one controller, how does that impact other scope objects? Child scope objects? Parent scope objects? Of course, all of those things are built around the concepts of prototype inheritance. If they don’t understand prototype inheritance, then they’re not going to understand the scope object hierarchy. If they don’t understand the scope object hierarchy, then they have a really hard time trying to build an application of any real size. Depending upon the chosen development tooling, there’s no real intellisense or code completion. For many developers, they’re basically back to just using a simple text editor. Although, this is getting better with tools such as Visual Studio Code and Atom. Editing all of this code in a simple editor and working with a brand new language and a huge framework can make for a challenging learning experience.
Interesting. What have you found helps people understand? What kinds of tricks do you use? I’m sure through teaching so many people, you’ve probably found quite a few little shortcuts to hacking people’s understanding of these.
The biggest thing I do to help developers is that I write actual code from scratch, live. And I get my students to write code as soon as possible in the course.
It really doesn’t work to sit people down and go through endless PowerPoint slides and then bore them with highly scripted labs where it’s basically go to line 33, type in a line of code, and watch it run. Labs where students modify one function in the middle of some file without really having proper appreciation of the larger context doesn’t work at all. Sure, they feel good about themselves when it runs, but they haven’t learned anything. I have been told by so many clients about training classes where students sit through endless slides, prepared code demos and scripted labs, then get to the end of the training and are unable to actually code an application.
For people to learn, they really have to code something from the ground up where they actually create every aspect of the application. Let’s say I only had one day to teach Angular. What would I do in that one day? I would have them build a simple CRUD application that incorporates all of the major components of Angular and demonstrates how they work individually, how they work together, why they do what they do, and at the end they actually produce something that’s actually functional.
Yeah. Makes sense.
And they will code the whole thing from scratch. There’s no pre-filled out file. No just going in and writing this one function. Because what happens is that people, instead of really digesting and understanding all the pre-written code, they just focus in on how quickly can they get the lab done. How quickly can I write that one function? And if you said “Okay, well now that you wrote that one function, now go back and build me a larger application,” they’re incapable of doing it.
Whereas if you actually have them build the application…there’ll be parts of the application that require more help and assistance than other parts. Maybe they wouldn’t be able to really completely rebuild the whole thing from scratch from memory. But, their ability to actually take what they have coded and then go use it somewhere is greatly increased because they actually wrote an application. That’s been my approach.
The other things I do to help people understand is that I believe strongly in doing public presentation of student code. I use group debugging sessions. When a student really isn’t getting it or they don’t understand it or their code is broken and they can’t figure out how to fix it, we have them plug their computer up and the students, the class as a whole, help to debug the application with them. Usually I step back as an instructor and sit in the back of the class and watch them. Then, if they get collectively stuck, then I’ll jump in and give them a little bit of information to keep moving them forward. But the key to doing that is you have to have an instructor who really loves to write code, knows how to debug code, actually understands how the technologies work, and is willing to jump in there and risk having something not work or break.
How would you contrast both learning Angular 2 versus Angular 1 for yourself? And how would you contrast teaching the difference between the two?
When I first learned Angular 2, I knew what to look for. I knew the problem it was trying to solve and I just had to memorize the APIs to use it. The way you memorize the APIs is to write lots of code with it as fast as possible. If you write lots of code, solving the problems over and over again, you remember the APIs.
What’s the difference? The first thing you have to realize is that Angular 1, Angular 2, React, Ember, Backbone, Marionette, Dojo, is that they all actually solve the same problem. They’re all different ways of solving it. But at the end of the day, they solve the problem how do I build a UI in a web browser without having to reload the page? How do I build single-page apps?
The key is once you understand the various problems that have to be solved by the libraries and frameworks, then when you encounter a new library or framework, you just go figure out how that library or framework solves that particular problem.
What’s your opinion on how different libraries/frameworks solve the problem?
It depends. Take Angular 1. Angular 1 is a much more we’ll say free-form, open-ended framework. Basically, you have this concept of directives. A directive can have a controller. It can have a template. Or you skip the directive and just have a controller and then that controller’s applied on a template somewhere. You can configure the scope object how you want. Set up your template variables, whatever. You have a lot of control.
In Angular 2, what they did is they incorporated the new popular pattern of web component-driven development. They took the concept of a directive that has a template and a controller and put it into a special kind of directive called a component. Now when we do Angular 2 development, instead of having a general purpose API, they now give you more specific APIs to work with. Less flexibility, but better application design and organization.
Can you share any specifics of where you think it got easier or harder?
Whereas, when you move to a library, the library solves certain problems for you. But, you still have to do the overall conceptual idea of ‘how do I put all the different libraries together to actually then build a framework for my solution?’ When you go with a framework, it’s much more controlling and specific about how to do things. But, specific and controlling is relative. Angular 1 is much more free-form, less specific, less controlling. Angular 2 has more patterns that are baked into it, like component-driven development. You can do component-driven development in Angular 1, but you don’t have to. In Angular 2, you don’t have a choice. With all that said, Angular 1.5 now has a new component API built into it showing the importance of the web component pattern.
How is it teaching Angular 2 so far? How do students take to Angular 1 vs. Angular 2?
Let’s talk about React a little bit. What’s your thoughts on it? What’s it like teaching on it? How are people learning it?
I think React is great. It’s a great little library. It’s great for building components. It’s a little bit different way of looking at the world. So that can be a little challenging for students.
In terms of understanding the flow of data and understanding that everything is uni-directional in nature. The DOM never directly updates the underlying model and user interactions never directly update the DOM. Instead, the DOM fires events and the events are handled by React to update the underlying model and then update the DOM again with the result of the changes. Consider the process of typing into an input field. Instead of taking the value typed in and updating the model or DOM, that value is passed through an event, which then gets passed back into the component. Then the component handles it. It’s the one way data flow that people are not used to (especially when they come from two way data-binding frameworks).
Because of this, it becomes a little bit more challenging for them to understand the flow of data in React. But on the whole, React itself is actually pretty easy to teach once people understand ES2015, which is the only way I teach React. The reason we only do ES2015 is that you have to use a transpiler for JSX anyway. So, if you’re going to use a transpiler for JSX, you might as well transpile the ES2015 code too. Why intentionally write your code in an old language?
We basically build a CRUD application, but it takes longer to teach then Angular 1. So, the same CRUD application that I can build in a half a day in an Angular 1 class, takes us all day in a React class. Because it is only a library and because of the way the data moves, it requires a little bit more work to accomplish the same thing.
Explain that process. What do you have to cover with React in a longer amount of time than what Angular allows you to do in half the time?
It just takes longer. With Angular, because of the whole template two-way data binding and automatically hooking up of the data from the model to the view, it just all works right out of the box. In React, you have to wire up a lot more stuff. Wiring all that stuff up just takes longer to accomplish.
You’ve got to look at it from this perspective. Angular is a far larger topic. So with React, once you have your component working, you’re done. You’ve covered React. With Angular, once you have a component working, that’s great. But there’s so much more to it. There’s filters or what are known as pipes. You have services. You have a bunch of complex unit testing stuff and React has some of that too. But there’s more to an Angular application than there is to React in terms of the library versus the framework. But when strictly building the Hello World CRUD application, more work is required for React than it does in Angular.
What do you think are the advantages of React or advantages of Angular over React?
React and Angular 2 have the advantage of following this whole component-based development paradigm. I would not choose Angular 1 to build any new applications whatsoever. Even though you can take a component-based approach with it, I think that having a framework or a library that has the component-based pattern already baked into it is far better.
I like Angular 2 a lot. I think it’s really cool and I think it’s going to be super successful. I think it’s going to be a learning curve for people because it’s not just a new framework. They have to learn new languages and new tooling and everything else.
If you were to teach a class where you had to build maybe more of a medium-sized app, something that’s a little bit more complex or interesting than Hello World, would React and Angular take more or less time? What does this look like beyond Hello World?
Angular, to do that, takes about a week with Angular. Really it takes a little longer than that. I have yet to teach an Angular 2 class where we were actually able to complete the medium-sized app within the week. Because there’s so many moving parts and pieces to it all, as well as, many new ideas and concepts that students have to learn.
There’s a bunch of subtopics that are emerging out of the React and Angular 2 worlds. Things like immutable programming and reactive programming. These topics in and of themselves are huge. How you leverage them within these frameworks and libraries is actually a really important thing to consider, discuss and talk about in a class. To really build a full-blown, medium-sized application and really leverage the lot of these new ideas, you probably are looking at longer than a week to do that in Angular.
On the React side, it’s a little different because React only does the component part. So, you have to answer a bunch of additional questions about what pattern do you want to use for architecture in the overall application, be it Flux, Redux, or MVC. How do you want to utilize React as part of a larger application? That’s a little bit harder to answer.
My philosophy is to give students, lots of opportunity to write code. They’re programmers. We need to hold them to a higher level. They get paid to write code for a living. They should be able to write code, learn great new technologies, and quickly learn how to apply those technologies. I find that in almost all circumstances that when you have that expectation, the students are able to deliver. You’re able to really activate that creative, problem-solving part of their brain as opposed to the passive ‘how fast can I get through the lab’ aspect of their brain.
Many of the students went to college and spent all this money on degrees and everything else. It’s really amazing how many of them really haven’t written a whole lot of code. Not a whole lot of code on their own anyway. They might have copied and pasted a lot of other people’s code. But, if you said build me something from scratch, they really can’t do it. The sad part is that they’re really missing out on one of the greatest joys of being a software developer. The ability to be creative and express how you solve problems. What’s your view of the world? How should the world be organized? The real goal of my classes is not to learn APIs or master patterns, the real goal is for students to solve problems through writing code by exploring their creativity and curiosity.
Truly, software development, unlike most professions nowadays, is a reflection of the person writing the code.
Kind of like a carpenter or a blacksmith 200 years ago or a 100 years ago. Their work would reflect who they are, while today we have machines that do all that for us. Just like a painting reflects the view of the world of the painter, the program reflects the view of the problem from the programmer’s perspective. It’s their ability to contribute something back and really use their gifts and talents and abilities that God gave them and actually make something with it. By not letting them do that in class, you’re really robbing them of a great opportunity.
Latest posts by Kyle Pennell (see all)
- Creating Network Diagrams With Vis.js - May 26, 2017
- Falling Back in Love with the Front End: An Interview with Azat Mardan - May 18, 2017
- How WebRTC Has Changed Web Communication - May 11, 2017