The Frontend Developer Landscape Explained and the Rise of Advanced Frontend Frameworks
9 likes4,613 views
The document discusses the evolution of front-end languages from web 1.0 to modern frameworks, detailing key terms and concepts such as MVC and AJAX. It compares four advanced front-end frameworks—Backbone.js, Ember.js, React.js, and Angular.js—highlighting their pros and cons, particularly recommending Angular.js for beginners. Additionally, it outlines a structured learning syllabus for new developers, along with FAQs regarding program policies and support for students.
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend Frameworks
- 1. The Frontend Landscape Explained and 4 Advanced Frontend Frameworks Dave Paola Christian Schlensker
- 2. About Dave & Christian ● Dave - ○ 15 years of experience, previously: Kontagent, Djangy ● Christian ○ 10 years of experience, previously: Pinchit, TAG
- 3. Agenda ● Explain Buzz Words ● The evolution of Front End languages from Web 1.0 to Today ● What is a Framework? ● Compare 4 Advanced Frontend frameworks ● Bloc’s Frontend syllabus
- 4. 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 - getting more information from the server in the background without re-loading the page ● jQuery - a “library” of pre-written JavaScript code. Now ubiquitous on the web.
- 5. Things evolve, they don’t change overnight Let’s look at the evolution of Front End Languages
- 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:
- 10. jQuery (2006) ● Pre-built “library” of JavaScript code ● JavaScript cross-browser less painful ● 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. What is a framework? ● Frontend Frameworks are being embraced as the way to build rich “desktop-like apps for the web” ● Problems with Web 2.0 frontend development: ○ Hard to collaborate ○ Hard to organize ○ Code becomes ludicrously complex & messy ○ Difficult to reason about ● Front End Frameworks act as a scaffold for a bigger, more stable house ○ A collection of JavaScript code built by the community ○ Standardized structure across many web applications ○ Added stability ○ Documentation
- 13. What are the dominant frameworks
- 14. BackboneJS ● Open Source from the start ● Model-View-Controller ● Bring desktop-app-like organization to mobile ● Pro: easy to get started quickly, very lightweight ● Con: spotty for sophisticated web apps, does not give you everything you need ● Hulu, Airbnb, Pinterest, Pandora
- 15. EmberJS ● Open source from the start ● Model-View-Controller ● Data binding integration ● Pro: holistic, sophisticated data management ● Con: “the ember way” doesn’t suit all apps, mainly for single page applications ● Companies: Square, Groupon, LivingSocial, Zendesk
- 16. ReactJS ● Open sourced by facebook ● Primarily used for binding data to UI elements ○ “The V in MVC” ● Pro: Great for building rich UIs ● Con: requires lots of 3rd party code integration (not holistic)
- 17. AngularJS ● Open source from the beginning ● Google hired the contributors to continue working on Angular ● “Components” ○ Small, separated functionality ○ App becomes greater than sum of the parts ○ Reusable ● Pro: Testable, vibrant community ● Con: poor documentation, difficult vocabulary, weird ● Companies: YouTube, Wired.com
- 18. 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
- 19. Bloc Frontend Syllabus ● 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 own App
- 20. Q&A
- 21. 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.