Screencast Build a Forum Web App With ES2015 JavaScript

  • Carlos Souza


  1. Student #1826718 said

    Good Stuff @Carlos and @Nick.

  2. jemmeli said

    great practical with theoritcal stuff

  3. Will Clark said

    very cool, thanks

  4. Maria said

    Thank you! One question. On the terminal you're working on the src/app.js file but when you check the console on the browser (e.g., around minute 20) the file name seems to be bundle.js. Can you explain more about how this is happening?

  5. Maria said

    Just watched the ES2015 With Babel and Gulp screencast, which explained that bundle.js is the file that gulp creates. If you're reading this and you're a beginner, make sure you watch that first before you go over Soup to Bits.

  6. Faculty

    Carlos Souza said

    ^ yep, exactly what @Maria said!

  7. George Dhoore said

    While I was initially unsure of how much I learned from the ES2015 course this screencast helped solidify some concepts and dramatically increased my confidence. Following along on a 'real' project at home showed me just how much I retained from the previous lessons and was a nice shot in the arm. Thanks folks!

  8. miyamota said

    So...about those banannas...?

  9. Valentin Paramonov said

    Awesome tutorial! Keep it up!

  10. Saulius said

    Simply great.

  11. Ivan Nikolaychuk said

    Cool, I really liked it! Thanks a lot. @Carlos, I just have one question: Let's pretend our backend is written on Java. When rendering backend data in UI, we have 2 ways: 1. Injection html by JS (actually what was done in this video) 2. Use JSP's (aka java object representation in html) and render html's with them.

    What is the right choise in this situation in your oppinion? Or "it depends.."?

  12. Nguyen Manh said

    very cool and awesome screencast.

  13. Jérôme said

    Hello, I followed the whole ES2015 course and found the exercises a bit limited... until I found this screencast which is a very good complement of the course. Thanks a lot! I have a question though: you implement all modules as objects beginning with let Post / ui = { ... }. Why choosing this way of doing instead of making classes and constructors? Like Class Post { constructor () ...} ? Also, why do you write the object Post with a capital P and the object ui with a small u? Is there a reason for this? Thanks a lot again.

  14. Faculty

    Carlos Souza said

    Great questions @wildcat5 ! I chose not to use the class syntax because I'm working mostly with functions and not methods from a class. We could implement Post and User with a proper class, but my personal preference in this case was to avoid it in favor of something I consider a simpler approach. Again, you could also do it with a class but I think for this particular case the literal object syntax with functions is easier to write/read. I still chose to use capital Post and User to indicate the functions belong to a "class of things", but in this case, the "class" is acting more like a namespace. I can't remember exactly why I did ui in lower case..

  15. Marcio Silva said

    Very cool!

  16. dannykoolj said

    Thanks this course has helped me a lot. I do like the babel gulp approach but prior to this I was using Jspm for transpiling and bundling my apps. Also since I plan on continuing to learn Angular 2 so I will like to stick to jspm since most people use systemjs with angular 2. Plus for me jspm has far less set up code and very easy to use. So what i did was try to run the app with jspm instead. So far I have been successful at using jspm in any app but for some reason this one gives me an error i can find or debug. it does not seem to be with the code but with systemjs itself and after much research i cant find anything. Is there anyway you can create the same app using jspm?

  17. Baris Can Daylik said

    Good job! @CarlosSouza But I have a confusion with using the innerHTML method vs appendChild method with fragments. As I know, if we want to inject some node on HTML, we should use appendChild method with fragments instead of the innerHTML method. Because w3scholls suggest;

    "The createDocumentFragment() method is useful when you want to extract parts of your document, change, add, or delete, some of the content, and insert it back to your document.

    You can also use the document's Document object to perform these changes, but to prevent destroying the document structure, it can be safer to extract only parts of the document, make the changes, and insert the part back to the document."

    What do you think which approach is the best? What are the advantages and disadvantages of both approaches? On which scenarios should we choose one over another?

    Thanks in advance.

  18. alexboffey said

    Great screencast, I found it very valuable - especially when coming from having little prior experience using the terminal, I found it fun and I'm looking forward to experimenting with gulp more in the future.

    Being a windows user, I found it a little hard to follow at first due to having to google windows equivelent commands every couple of minutes, so I wanted to share this:

    It's a node package that implements Unix commands into a windows shell, so it may help out other windows users who are new to terminal use.

    Many thanks!

  19. grbulk said

    Great screencast! Could add some more ES2015 functionality like classes or iterators. Important prerequisites like babel, browserify, gulp should be addressed upfront so that students can acquire this knowledge before watching the screencast. Anyway, these screencasts help a lot and are quite good to understand.

    One minor point: Under Linux there seems to be a npm problem when installing babel: babel-register has to be installed in --save-dev mode manually although babel has been installed according to the instructions in the screencast. This weird behavior seems to be known but there is no real permanent fix to it - let alone the manual installation of the module mentioned above.

  20. kingcrabx9 said

    Hey gentleman. Just wanted to get some clarity on one thing. It seems you start with the assets and markup already provided. However, it's not clear whether we students should have these assets or not.

  21. Faculty

    Carlos Souza said

    Hey! The source code for this application along with all the assets is available on the following Github repo - The link is also on the resources tab, under the video.

  22. Alexander Fleischer said

    Very cool Video. It's better than a course. :-) Many many background infos

  23. Paul Barron said

    Wow. This really put the ES2015 course in perspective. Super thorough!

  24. aaries said

    Just one thing : The tag is not necessarily from sidebars :

    Great video, exactly what I was looking for :)

  25. aaries said

    Just one thing : The ASIDE html tag is not necessarily from sidebars :

    Great video, exactly what I was looking for :)

  26. sarahsga said

    Thanks a lot! Loved this screencast, specially how that guy on the right waved goodbye in the end was funny :D Learned a lot. Totally worth my money.

  27. Shane Biggs said

    The wave goodbye at the end is priceless.

About This Screencast

In this episode, Carlos Souza and Nick Wronski will take what you learned in ES2015: The Shape of JavaScript to Come course and put it to practice by building out features for a forum web app. We'll write client-side JavaScript using ES2015 that pulls data from a backend API and populates a page with new HTML elements.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now