Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, and Backbone
7 likes4,233 views
The document provides an overview of the evolution of frontend web development, discussing key technologies like HTML, CSS, and JavaScript, while comparing various frameworks including AngularJS, ReactJS, and EmberJS. It outlines Bloc's frontend course structure, advice for beginners, and includes FAQs about enrollment and support. The document emphasizes the importance of community and resources in the learning process and ultimately recommends AngularJS for its balance of ease and robust features for new developers.
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, and Backbone
- 1. The Evolution of Frontend Christian Schlensker Joe Lipper
- 2. Why you should listen to us ● Christian ○ 10 years of experience, previously: Pinchit, TAG ● Joe ○ Bloc Frontend Course Director, previously: freelance developer, co- founder of BrandSlip, Bloc Alum
- 3. Agenda ● Brief history of web development ● Lay of the Land & Explain Buzz Words ● Compare 4 Advanced Frontend frameworks ● Bloc’s Frontend syllabus & philosophy
- 4. Things evolve, they don’t change overnight
- 5. Buzz Words Explained One of the biggest challenges for beginners is understanding how things fit together: ● HTML - the wood frame of the house ● CSS - paint, bricks, carpet ● JavaScript - the electrical system, plumbing, and the electrician and plumber going around adding and fixing things ● MVC - Model / View / Controller - a way of thinking about complex web apps. ● AJAX - Dynamically update web pages without refreshing ● jQuery - a library of functions that can be used to make JavaScript code simpler. Now ubiquitous on the web. Ultimately used to make web apps interactive. What about these: ● HTML vs. HTML5 ● CSS vs. CSS3 Commonly confused: ● Java vs. JavaScript ● Sass vs. SaaS
- 6. Web 1.0 ● Hypertext Markup Language (HTML) ● Static ● Pages ● 1990s and before ● Released, but not widespread: ○ Javascript ○ CSS ● Netscape and IE
- 7. Web 2.0 ● Cascading Style Sheets (CSS) ○ released in 96, not widespread until later ● Dynamic HTML (DHTML) ○ Use Javascript and CSS to manipulate HTML elements ● Rudimentary interactivity ○ Drag and Drop ○ Slow animations ● Examples ○ Amazon ○ Wikipedia ○ YouTube
- 8. Web 2.0 ● Browsers evolve + diversify ○ Opera (1994) ○ IE (1995) ○ Safari (2001) ○ Firefox (2002) ○ Chrome (2008) ● All different!
- 9. circa 2003: Why Cross-Browser Tools Emerged
- 10. A JavaScript Library: jQuery (2006) ● What is a Library? A package of pre-written code that allows you to do complex things ● Using this standard library across websites enabled developers to add cross-browser compatibility quickly ● Helps a LOT, but not 100% ● The basis for many current-generation frameworks
- 11. Today ● Javascript a “mature language” ○ Tools ○ Best practices ○ communities ○ open source ● CSS3 ● HTML5 ● Desktop & Mobile Browsers ● Examples: Modern Gmail, Google Docs,
- 12. Pause for Q&A
- 13. What is a framework? ● Problems that frameworks try to solve: ○ Applications were hard to organize ○ Code becomes ludicrously complex & messy ○ Hard to collaborate because no standard way of doing things ○ Messy, complex code is difficult to reason about
- 14. Now Let’s Look at all these languages, libraries and frameworks again, but from the point of view of a beginner starting today: What do you need to know, when should you know it? Beginner Intermediate Advanced Scenario Finished Codecademy Piece together an MVP Get a Developer Job Languages HTML, CSS, and JavaScript jQuery, Bootstrap / Foundation, Rails or some other application framework Frontend Frameworks: AngularJS, BackboneJS, EmberJS, or ReactJS Concepts Webpage structure, Styling, Javascript Variables, If Statements, Loops, Arrays CRUD, REST, Working with APIs Object Oriented Programming, MVC, Test Driven Development, Single-Page-Applications
- 15. What makes a framework good for beginners ● Conventions over Configuration ● Strong tools for code organization ● Reusable Components ● Large community / lots of tutorials
- 16. Today ● Desktop-like applications possible ● Major Frameworks ○ BackboneJS ○ EmberJS ○ ReactJS ○ AngularJS
- 18. BackboneJS ● Pros ○ easy to get started quickly ○ very lightweight and minimal ○ lots of tutorials ● Cons ○ declining in popularity ○ not as advanced as other frameworks for web apps ○ does not give you everything you need ● Verdict ○ Not great for beginners ● Hulu, Airbnb, Pinterest, Pandora
- 19. EmberJS ● Pros ○ Convention over Configuration ○ Data binding integration ○ holistic ○ sophisticated data management ● Cons: ○ requires more setup than Angular ○ takes time to learn the conventions ○ “the ember way” doesn’t suit all apps ○ mainly for single page applications ● Verdict for Beginners: ○ Good option to look at ● Companies: Square, Groupon, LivingSocial, Zendesk
- 20. ReactJS ● Pros: ○ Gaining popularity quickly ○ Created by FB - open sourced it less than a year ago ○ Primarily used for data binding ○ “The V in MVC” ○ Great for building rich User Interfaces ● Con: ○ Very new means fewer resources and smaller community ○ requires lots of 3rd party code integration (not holistic) ● Verdict: ○ Not recommended for beginners
- 21. AngularJS ● Pros ○ Easiest to set up ○ Google-backed project ○ hired the contributors to continue working on Angular ○ Organization with “Components” ■ Small, separated functionality ■ App becomes greater than sum of the parts ■ Reusable ○ Testable ○ Vibrant community ○ Large library of third party code ● Cons ○ difficult vocabulary ○ advanced features can be difficult to learn ● Companies: YouTube, Wired.com ● Verdict: (we’re biased) Good for beginners
- 22. Advice for Beginners We chose AngularJS as the Advanced Framework we wanted to teach beginners ● AngularJS has one of the more vibrant communities ● Has a more-shallow learning curve than others ● Once you have the depth of understanding in one advanced framework, it’s much easier to pick up another one
- 23. Bloc Frontend Syllabus Full Syllabus Here Outline: ● Phase I (1st third of course) ○ Set up your Dev Environment, command line, github, Heroku ○ Set up back end using NodeJS starter-app ○ Intro to HTML, CSS, Javascript ○ Intermediate languages: jQuery, Sass ○ Launch your first web-app: your own version of Spotify ○ Advanced Front End Frameworks: Intro to AngularJS ○ Re-build your Spotify app using AngularJS ● Phase II (two thirds of course) ○ Choose & build 4 web apps from a menu of options ○ Each project builds upon what you’ve learned and introduces new concepts ○ Goal is to build many real apps “notches in your belt” ○ Capstone: Design, Build, Test, and Launch your Capstone App
- 24. FAQs What’s your refund policy? If Bloc isn't the right fit for you after all, you can un-enroll at any time. Bloc is backed by a Real Results Guarantee that’s real simple: if you aren’t getting value, we don’t get paid. Un-enroll in the first week for a full refund. Un-enroll later, and get a pro-rated refund based on the number of days you've spent in the program. Do you offer flexible payment options? Yup. You can pay your tuition up-front, or pay in 3 or 6 monthly installments. The tuition is the same no matter which plan you choose. What if I want to switch mentors? No problem. Mentors consistently get stellar ratings from their students, and it's very rare that a student asks to switch mentors. That said, say the word and we'll make it happen. What is the time commitment? We designed Bloc to be a structured, immersive program that still fits into your life. No need to relocate or quit your job. For the 12-Week Program, we expect at least 30 hours a week. For the 24-Week Program, we expect 15 hours a week. We understand learning to become a developer or designer is a huge commitment, and that this may require some late nights and weekends. Rest assured, we’ll be there to support you the entire way through. Our flexible online approach means you decide when and where works best for you. What if I fall sick or can't keep up? This is a big commitment, and we expect you to put in the necessary hours. That said, we know that life happens. When it does, reach out to Karen and we'll figure out how to help you together, and make sure you still get the most out of your time at Bloc. In the case of extreme circumstances, you can freeze your apprenticeship temporarily. You should let Karen know immediately if you need this option. We’ll save your progress, and when you are ready you’ll pick-up where you left off. We can’t guarantee you’ll be able to continue with the same mentor, but we want to make this option available to you if need it.