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 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.

25. Questions?
hello@bloc.io