The Evolution of FrontendChristian Schlensker

Joe Lipper

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

Agenda

● Brief history of web development● Lay of the Land & Explain Buzz Words● Compare 4 Advanced Frontend frameworks● Bloc’s Frontend syllabus & philosophy

Things evolve, they don’t change overnight

Buzz Words ExplainedOne 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

Web 1.0

● Hypertext Markup Language (HTML)● Static● Pages● 1990s and before● Released, but not widespread:

○ Javascript○ CSS

● Netscape and IE

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

Web 2.0

● Browsers evolve + diversify○ Opera (1994)○ IE (1995)○ Safari (2001)○ Firefox (2002)○ Chrome (2008)

● All different!

circa 2003:

Why Cross-Browser Tools Emerged

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

Today

● Javascript a “mature language”○ Tools○ Best practices○ communities○ open source

● CSS3● HTML5● Desktop & Mobile Browsers● Examples: Modern Gmail, Google

Docs,

Pause for Q&A

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

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

What makes a framework good for beginners

● Conventions over Configuration● Strong tools for code organization● Reusable Components● Large community / lots of tutorials

Today

● Desktop-like applications possible● Major Frameworks

○ BackboneJS○ EmberJS○ ReactJS○ AngularJS

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

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

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

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

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

Bloc Frontend SyllabusFull Syllabus HereOutline:● 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

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

Questions?

hello@bloc.io