The Frontend Landscape Explained and 4 Advanced Frontend Frameworks

Here at Bloc, we spend a lot of time talking to “advanced beginners” – folks who have been trying to learn to code for a while, but who have struggled to find the right path. These people are sometimes overwhelmed by buzz words like “HTML5,” “JavaScript,” and “Ruby.”

It’s a common saying around here: “You don’t know what you don’t know.” And when you’re just getting started, it’s easy to go down the wrong path without realizing it, only to  emerge frustrated that they learned the wrong thing, or that they still can’t build a real website. It’s more important than ever to have an experienced guide.

This is why we recently hosted a free online workshop on The Frontend Landscape. Our goal was to help break through the buzz words and jargon and offer “advanced beginners” some insight into the lay of the land, as well as how the landscape has evolved, and where Advanced Frontend Frameworks are headed from here. Below is the slide deck from the info session:

Learn more about Bloc’s Front End Developer apprenticeship

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 info session on front end frameworks, Bloc co-founder and CTO Dave Paola covered 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.

 

About the Info Session Hosts: 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.

Interview with JavaScript Evangelist: Matthew Maxwell

Bloc Mentor Matthew Maxwell recently attended a Startup Weekend event to get engaged with the development community in a new city. Learn more about his outfit and exploits on his blog.

Bloc Mentor Matthew Maxwell recently attended a Startup Weekend event to get engaged with the development community in a new city. Learn more about his outfit and exploits on his blog.

Matthew is a JavaScript evangelist with eight years of front end web development experience. He spent five years at Clearwire before moving into the startup world. Since then, he has worked with SitePen, CollegeFrog, and others. Matthew is based in Florida and is involved with Startup Weekend there. To learn more about Matthew (and, incidentally, to see more falcons), check out his Bloc mentor profile.

We recently sat down and asked Matthew for some advice on getting started with Front End Development. Here’s what he had to say:

Bloc: Tell us a little about yourself

Matthew: For 8 years, I’ve acquired expertise in developing for the world wide web and I love it. I have a passion to code. Front-end development takes time and dedication to master; however, even as an expert, guidance and help are always beneficial for the learning process.

What drew you to working as a Front End Developer?  

Matthew: What’s fascinating about front-end development is the rapid changes in technology. With browser vendors feverishly battling to produce the “next best thing,” we web developers receive more amazing and ever-changing functionality at our fingertips. The bottom-line is that our customers receive a better product and experience.

Bloc: What advice would you give a beginner front end developer on learning advanced front end frameworks like AngularJS?

Matthew: My advice to any beginner would be to first understand native JavaScript before trying to understand the tools that use it. This was my greatest accomplishment because it allows me to, if I so choose, skip the wikis and dive right into the source, which is where I learn the most. It takes some patience and practice because not everyone will write code like you. In JavaScript, there can be multiple ways to do something, and each of them can be correct in their own context.

The second piece of advice is to stand on the shoulders of giants. There are a lot of people out there that are smarter than I am, and I make it a habit to learn as much as I can from them. When I was first learning the JavaScript language, it was not uncommon to see one of my three monitors in the office dedicated to videos of Douglas Crockford or Nicholas Zakas. Research the smartest people in the field, and through some good old fashioned Youtube University, suck as much knowledge from their digital minds as humanly possible. This applies to any framework or library, including Angular.

Third, I would say never be afraid to fail. Some of my greatest successes in programming are actually my biggest failures, like that one time I accidentally forgot a WHERE clause and deleted an entire table in a database…in production…to find out our database replication had been failing for six months. Lesson learned? Don’t deploy directly to production without testing. Luckily we had some redundancy in place that let us rebuild.

Finally, I would say never stop learning. Just because you master something doesn’t mean you’re off the hook. Specifically with JavaScript, for example, the ECMAScript on which it is based is a constantly evolving target. Never be content and always strive to get better every day.

Bloc: We noticed you have considerable experience with both Angular and EmberJS – which would you advise a beginner start with and why?

Matthew: Angular vs Ember is a difficult question. They both have their pros and cons, so I’m not sure I could give you a straight answer. They both make it really easy to get up and running, but Ember is a little more cumbersome if you need something custom done. I love the way Angular leverages HTML attributes and gives you access to directives, and I especially love how Angular encourages sufficient unit testing. I guess I would say, for most of what I’m doing, Angular would win out.

Self study has its challenges

As a self-taught programmer, I naturally sympathize with the spirit of Mr. Clouten’s recent post, “No three-month course can teach you how to code”. But as a co-founder of one of these coding apprenticeships, I’ve also been humbled.

First, let’s start off with the things we agree upon: learning to code is hard. Like mountain climbing, it’s mostly a psychological exercise in endurance. If you’ve tried even excellent products like CodeSchool, Codecademy, Treehouse, etc, you know how difficult it can be to obtain pragmatic programming skills on your own.

We also agree that there are some generous marketing claims made by some bootcamps. You will not become an omnipotent super coder in just 12 weeks. Nor should you expect to achieve the same conceptual depth as a Computer Science major.

Finally, he’s right in saying that improvement in your coding skills is correlated with your interest in the craft. Genuine enthusiasm will carry you through inevitable moments of frustration.

But he’s wrong to imply that teaching yourself is a superior alternative to an intensive course guided by a mentor. The reality is that most folks who attempt self-teaching fail. They fail because these are hard skills to learn. Sometimes you get stuck, and need a big help button. Sometimes you don’t even know what question to ask, or if you do, you don’t know how to get the answer. The result is often blank staring at your screen, cursing, and worse, abandonment of your self-taught mission. We know it because we’ve heard it from hundreds of students who tried to go it alone and hit that wall.

Enter the “three-month program”. Bloc. Dev Bootcamp. General Assembly. Flatiron. These programs all differ slightly in their approaches, but generally speaking we all aim to solve this problem of helping motivated people accelerate their learning with help from experienced practitioners. If it takes 10,000 hours to become an expert, programs like these guide you through those first several hundred hours of fundamentals in a structured, efficient manner.

And he’s wrong to imply that self-taught developers and Computer Science grads are inherently better equipped than bootcamp and apprenticeship alumni to write efficient, fully functional code and build outstanding digital products.

What I’d like to suggest is that what you see on the surface of these seemingly magical three-month programs is merely the tip of the iceberg. Albert Einstein said “Education is not the learning of facts, but the training of the mind to think.” What you’ll discover about these programs is that while they do train you in programming, the focus is actually on how to learn.

It’s not just about getting the job. It’s not about the money. Those are the stepping stones: This fledgling industry of bootcamps and apprenticeships exists because in the 21st century, you must possess technical skills in order to participate in the fastest growing part of the economy. It’s practically a movement.

You should expect programming apprenticeships and bootcamps to give you:

- A cornerstone of fundamental knowledge upon which you can reliably build your career as a programmer
- Insights and best practices from experienced practitioner
- The tools to build real products with your own code, demonstrating your capabilities to yourself and others.

If you opt to teach yourself, you’ll need loads of disposable time that you can invest in working through nettlesome problems and scouring for best practices. You’ll also need a deep well of discipline to pound away until you figure out ways to get yourself unstuck. This approach may work for some, but we think there’s a better way.
Dave Paola
Co-Founder and CTO
Bloc
www.bloc.io

Mike Dekker interviewed

Mike is one of our design mentors at Bloc. He was recently featured by The Design Kids:

Mike Dekker is one of those annoying guys who’s seems to be good at everything. Not only does he have a solid digital background (working with Nike Europe to Studio Dumbar in Holland), he also studied fine arts on top of that and is a talented artist, collaborating on group shows, art battles and charity work. He’s recently been approached by Herschel to be a new ambassador for their “Well Travelled Series”, as well as picking up work as a Design Mentor in San Francisco. He’s been living in WA exploring deserts, rock climbing and working in an agency, and now resides between Byron Bay, Melbourne and Europe as a freelancer. Lucky!

Read the full interview here. Congrats, Mike!

Ruby Warrior updated with harder levels, and explosives!

new_levels

We are pleased to announce the release of Ruby Warrior version 2. The interactive web based programming adventure has been updated with new content and a redesigned interface.  It now includes the intermediate levels from Ryan Bate’s classic command line game. Here are some of the things you will encounter in the update.

Bind your enemies

Turn the tables on the sludges by using bind! and turn your enemies into captives. Be careful not to lose track of which ones are real captives and which ones are enemies. If you accidentally free an enemy, they won’t be grateful.

bind bind

The Ticking Clock!

Some captives have been rigged with explosives, you’ll have to work faster than ever to rescue them before they detonate and bring down the whole tower.

Bombs!

Speaking of explosives, Ruby Warrior now has a set of bombs to play with. Clear out 3 enemies at once in a fiery wave of holy death. However, you can’t be slinging bombs all day without losing a few fingers. Explosions will damage you along with your enemies.

detonate detonate2

The Second Dimension…

No longer is Ruby Warrior confined to only moving forward and backward. On intermediate difficulty you can also go up and down. Prepare to be surrounded.

Gender Neutrality

Did you know you can name your warrior anything you want? Seriously, we’ve had way too many warriors named Spartacus.

name

New Apprenticeship: Front-End

Front-End

Today, we’re announcing our 12-week Front-End Apprenticeship.

What you’ll learn

Set up your development environment with Sublime, Github, and Heroku. Learn the fundamentals of HTML5, CSS3, and Javascript. By the end of this first phase, you’ll have built Bloc Jams (your own version of Rdio – a streaming music web app).

In the process of building your Bloc Jams app, you’ll learn common front-end frameworks and libraries, diving deeper into jQuery, AngularJS, and JavaScript testing frameworks.

The best way to learn is by building real apps. You will build at least four more apps to build upon your first app and reinforce what you’ve learned. As with all of Bloc’s apprenticeships, your final capstone project will entail choosing your own app to design and build. This project will tie together and showcase all that you have learned.

We can’t wait to see what you’ll cook up!

button-learnMore-02

The World’s First Android Apprenticeship

AndroidHeaderImage

Instagram. Snapchat. WhatsApp. Uber. Duolingo. Each of these mobile apps have one thing in common: you could’ve built them.

We know that you have an idea nobody has thought of. However small your idea seems, the ultimate dream is to actually build your ideas, to see them in your hand, and in the hands of your friends, family, and the world.

This is not just a pipe dream. You don’t need anybody’s approval to begin building your app. You don’t even need a good name. You just need the skills.

Today, we’re announcing Bloc’s first mobile apprenticeship: Android. The Android apprenticeship is designed with one outcome in mind: to get you the skills to build your apps. And the best way to learn is to build. From the fundamentals of programming all the way up through building a user interface and deploying your app to the world, Bloc’s got everything covered. You just need to show up ready to work.

If you enroll before April 14th, we’ll let you take 30% right off the $5,000 price tag: only $3,500. (By the way, compare $3,500 to the typical student debt accumulated by even a modest CS undergraduate degree, at least $50k).

So what do you get?

You get the world’s best apprenticeship. At least 3 hour-long meetings per week, one-on-one, with a dedicated, experienced professional (this is why we call it an apprenticeship). These aren’t instructors, they’re full-time practitioners and they want to share their experience, best practices, war stories, and wisdom.

Oh, and because we believe in developing on real devices, a Motorola Moto G phone is included in the price, for every student.

Bloc students love their mentors. We’re proud and impressed by the relationships that have formed around Bloc — most of them far outlast the meager 12 weeks.

There are over 800 million users of Android. And the best thing about the mobile ecosystem is that it’s a level playing field — the lone, indie developer can beat the large software company. It happens every day!

Don’t waste another day: there’s never been a better time to get started realizing your dreams.

button-learnMore-02

7 Step Guide to Getting Started with Web Development using Codecademy

Howdy folks,

My name is Prasid – I’m the community manager here at Bloc, but before that, I was the Director of Marketing at SoFi – another education startup, and I very very much wanted to learn to code on my own. I thought about enrolling in a bootcamp, I thought about learning online. And I tried about five different resources before eventually discovering Bloc. I wanted to share my personal guide on how you can get started with web development, using one of the tools that really helped me in the first month – none other than Codecademy. In later posts, I’ll talk about what I did after Codecademy when I was ready to get more serious.

Codecademy is considered by many, including us here at Bloc, to be the best resource for beginning your “learning to code” journey and getting a taste of the vocabulary, syntax, and sentence structure for code. So – you’ve never coded a day in your life? This guide is for you.

Step 1: This ain’t your father’s textbook. Stop reading. Start coding. 

Let’s get one thing straight: you’ll never learn to code until you start coding. I’m  not even gonna to tell you what HTML stands for. Doesn’t matter yet. I am going to tell you that websites are made up of  multiple languages being used together – so you’ll probably end up having to learn a bit of 3-6 languages before you can build anything real. This is why we recommend you avoid going too deep in one language when you’re getting started. Instead, focus on outcomes – focus on building real things.

Ok. Right now, alongside this guide, pull-up Codecademy and get cracking.That’s the beauty of Codecademy – you can be doing it in 20 seconds.

Got Codecademy open? Great. Create an account.

 

Step 2: Start with a taste of HTML

Let’s say you want to build something that looks like an old Geocities site – the number one language that you’ll need to learn to build it is HTML. The words on this page – they’re written in HTML.  HTML is the “wooden frame” of the house, that everything is build around. I want you to go to the Web Fundementals track and do Exercises 1 and 2. Should be super-quick – and now you’ll have a taste of HTML!

When developing a website, the fundamental language being used is HTML. So if you wanted to make a site that looked like a 90s Geocities site (like above), the #1 skill you would first learn is HTML. Then you would add CSS to add better styling, and finally you might employ JavaScript to add interactive elements.

With the Codecademy course in Web Fundamentals, you can learn to build sites like this.

 

Step 3: And now some CSS

Let’s not do all of the HTML track right now. I just want to give you the lay of the land. Let’s move on to CSS.

Now, let’s say you want to build something attractive – minimal text – lots of squares of pretty colors and gradients and rounded corners – this is what CSS is for. Seriously, still not gonna tell you what the acronym stands for. CSS is like the facade of paint, stucco, siding, and roof tiles that go over your wooden frame making it pretty.

Go ahead and do Web Fundamentals exercises 7 and 8.

 

Step 4: Javascript – You’ve hit the big-time

Let’s say you’re wanna build something interactive. Ever noticed how sometimes when you click on a button a whole new page loads, other times you can click it without the reload. That’s Javascript! Javascript is what makes drag & drop work. It’s what let’s you compose a new Gmail and send without reloading the inbox or doing it in a pop-up.  Javascript is like the conveyor-belt – moving new stucco and wood back-and forth from the tool-shed as your house morphs and changes. If somebody mentions JQuery, or Angular.js, or Node.js to you – they’re talking about things built on top of Javascript.

Let’s get a taste of this one. Go to the Into to JavaScript track and do exercises 1-4.

JavaScript acts as a conveyor belt during web development

JavaScript is like a conveyor belt that brings new elements to the page and carries old ones away, in order to create interactive site elements.

 

Step 5: Decide What You Wanna Learn Next

Okay great. Now you have tasted all the basic flavors. Now the question is – do you want to learn web design, front end web, or full-stack development. Well, someone should probably explain the difference. Here’s a great way to visualize the difference between frontend and backend development from Skillcrush.

How to visualize Front End and Backend Web Development as an Iceberg

Thanks to the folks at Skillcrush for this amazing visualization of Frontend vs. Backend Development

Web Design

Web Designers generally use tools like Photoshop or Illustrator to design what a page should look like, and then hand-that-off to a developer who turns that into code. As a web designer you might want to know HTML and CSS, but you’ll want to go deeper in design patterns, user flows, user experience, user interfaces, wire framing, and that sorta stuff. Web Designers will always be totally dependent on a Full Stack Developer in order to get something up and running.

Frontend vs. Backend and Full Stack

Let’s say you want to build something flat – like the Apple.com site – it has lots of beautiful images – colors, and links – you could probably get-by with just Front End skills. But let’s say you want users to be able to sell stuff and accept credit card payments – now you’re gonna need some back-end skills. Let’s say you want to build Yelp.com – you could build probably build the listings for all the restaurants with just Front End skills. But now you want users to be able to log in and write reviews and give ratings. Or you need that search-bar to work. Now you need some back-end skills. Without them, you’ll be dependent on a back-end developer who can bring your ideas to life. That’s why Bloc offers a Full Stack Developer Apprenticeship, but not a Front-End-only course.

Ultimately, it’s gonna come down to your priorities.

Want to create something pretty that looks clean and modern like Yahoo.com, but doesn’t do much more than display text – yeah you might be able to get by with just front-end skills.

 

Step 6A: Become a Full Stack Developer

For your madam (or sir), I recommend the rack of lamb with a side of Ruby.

But seriously, for the aspiring full stack developer, I recommend you finish-out the Javascript track, and then complete the Ruby track  There’s an ongoing debate between Ruby on Rails vs. Python/Django – Ruby is much more established (as of January 2014, although this may change) and so we recommend learning Ruby.

 

Step 6B: Become a Front End Web Designer

If you know that you are going to have a team member who can bring your ideas to life and you want to focus on being a kick-ass web designer, we’d recommend you finish-out Codecademy’s Web Fundamentals track and then move-onto more design-specific resources. Personally, we think Tuts+ offers some great premium courses. When you’re ready for something more advanced, try out Bloc’s new web design & front end apprenticeship.

Learn Front End Web Design for Web, iPhone, Android, Mobile, and Tablet

Step 7: Figure out what to do after Codecademy

There’s no shortage of great options for what to try once you’re done with Codecademy’s Javascript and Ruby tracks. I think the JQuery track is great. But the challenge is always going to be that you can’t build really substantive projects without combining languages, and right now Codecademy doesn’t offer a way to do that.  One of the best resources out there is RailsTutorial.org. If, after RailsTutorial, you are looking for something more advanced, you might be ready to try out Bloc  Although we don’t require any previous coding experience, we find that most students want to get their feet wet with something more advanced than Codecademy.

600x315-Graphic-TextA

Bloc Info Session with Bloc Alum & Bloc Mentor

This past Friday Feb 21st we hosted our usual Bloc Info Session, which we host every Friday at Noon. This week however, we invited a recent Bloc alum and a current Bloc mentor to join us on the Google Hangout.
Watch the Info Session Recording


Feb 21st Bloc Info Session: Interview with Bloc Alum and Mentor

 

Meet Paddy: Recent Bloc Alum

Paddy

Paddy is a recent Bloc graduate who, in her own words, has “fallen totally in love with programming.” Prior to enrolling in Bloc to become a web developer, she worked as a research analyst at Experian and as a Project Manager at Google. She’s currently settling in after her move from London to New York to start her career as a developer and entrepreneur. During the info session we reviewed a number of web apps she created over the course of Bloc and since graduating.

 

 

Meet Aaron: Current Bloc Mentor

Aaron

Aaron is a Ruby on Rails developer from Cincinnati. He is currently an Infrastructure Consultant for Modulus and was previously a DevOps Engineer for Critical Mass Media. Aaron shared his experience working with  beginners as he guided them from their first coding experience to their first web development job. Aaron consistently averages a 9.5 out of 10 in mentor feedback from Bloc students. Check out some of his students’ feedback below.

 

What Aaron’s students had to say about him:

“He always went above and beyond the minimum he was required to do.”

“I got the job!!!! My first interview and I nailed it… All thanks to YOU and YOUR dedication to me and my well being.”

“The relationship with my mentor has been amazing… My mentor is my favorite part.”

Behold the handiwork of Bloc alumni!

Orlando.io was a capstone project by Orrett – a Bloc alum based out of Orlando who wanted to help organize and grow the Orlando startup community

Tagport was a project started by a beginner (with a little non-Rails coding experience). After Bloc he was accepted to the Google Summer of Code.

Fanbass was a project started by a complete beginner and a couple months after Bloc was seed-funded by Tech Stars.

Jog is yet another project started by a beginner to capture code snippets and improve memorization / recall.

Home Genome from Seth Siegler

Hunters Powers and Lawson Kurtz built HerePrettyKitty

Rank the cuteness of kittens and see how they rank against each other.

Hunter Powers built ThatMovieApp

Recommends a movie to see today and shows you the trailer. Uses a custom weighted scoring algorithm and scrapes the web using multiple APIs to provide its recommendation.

Ryan Krueger and Tom Hoeck built Sportsume

The LinkedIn.com for high school, college, and professional sports players. Several scrapers written to collect hundreds of thousands of rows of information on teams. Uses multiple self-referential and polymorphic associations for the database.

Arun Gupta built Airbrush.

Apply Instagram-like filters to your Facebook photos or new photos that you upload. Send physical postcards of the photos. Uses Stripe for charging.

Luciano Tavares built Dealbook.

Built by an angel investor to track deals in Brazil. Plans to expand to other countries shortly.

If you are a Bloc alumni and you’d like to include your side project (or get an Alumni Profile!) please let us know!