Over the past several years, as the role of the browser has grown, rich desktop-like apps have emerged built entirely in the browser. To enable this movement, a new generation of powerful JavaScript frameworks have emerged including EmberJS, AngularJS, BackboneJS, and React. In this 30 minute crash course on front end frameworks, Bloc co-founder and CTO Dave Paola will cover the history of front end web development, the recent emergence of these new Javascript frameworks, and go over some of the pros and cons for learning them. We'll hear from Bloc co-founder and CTO Dave Paola and Bloc Developer Christian Schlensker. Prior to Bloc, Dave was a developer at Kontagent, has over 15 years of software development experience, and has founded numerous other companies. Christian comes to Bloc from Pinchit and TAG where he was a developer. Prior to that, Christian was also a graphic designer. In our experience, beginners are often overwhelmed by buzz words like "HTML5," "JavaScript," and "Ruby." Without an experienced guide, they can spend months going down rabbit-holes drilling into specific languages, and emerge frustrated that they can't build a real website. Dave will start by helping you visualize the front end web development landscape. Comparing Angular, Ember, Backbone, and React 2 Once you understand the landscape, Dave will introduce the four major front end frameworks that have emerged over the past two years. He'll discuss the pros and cons of learning each one, from the point of view of a beginner. These four frameworks are: AngularJS, EmberJS, BackboneJS, and ReactJS.

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.