Categories
Web Technology

Instant AngularJS Starter

Have you heard of AngularJS?

It’s a Javascript framework that’s picked up some serious momentum over the past few months. And it’s not hard to see why! I wrote a post about why I think it’s great back in July (now the most popular post on this blog, by the way), and it’s gotten even better since then.

But knowing why a framework is great is only the first step. Now you have to figure out how to use it. This can lead to all kinds of frustrating questions:

  • How well does AngularJS scale?
  • What sort of tools can/should I use with AngularJS?
  • How do all those features work, under the hood?
  • Any gotchas to watch out for?

I could go on.

I wanted to help you figure these things out, but I couldn’t fit all of that into a single post. Even with many posts, I would have had to gloss over a few things. What’s a simple, part-time blogger to do?

Write a book, it turns out.

Announcing the Instant AngularJS Starter (also available in paperback).

This is a book I wrote to help you ramp up on AngularJS as quickly and efficiently as possible. It’s full of code samples, helpful tips, and an entire chapter about using the framework to build scalable Javascript applications.

I wrote this book because I used to spend a lot of time learning how to work with new frameworks. I know the pains and problems with trying to build an application in a framework you’ve never used before, and I know what kind of examples are helpful, and what kind aren’t.

If you’re looking to ramp up on AngularJS, and you don’t have time to dig through Google results and sort through forum posts, this is the book for you.

Here’s where you can get your copy:

Instant AngularJS Starter (eBook)

Instant AngularJS Starter (paperback)

If you pick one up, I’d love know what you think. Drop me a line anytime at dan@dan-menard.com.

Note: There were some typos in the code samples that shipped with the book. I’m working with the publisher to distribute the corrected versions, but in the mean time, you can email me and I’ll send you the updates directly.

Categories
Web Technology

Things that are Awesome about AngularJS

This post was so popular I wrote a book about ramping up on AngularJS. It’s available in eBook and paperback if you’d like a copy.

We host talks at Netflix every Monday, and today’s talk was from a couple of Google employees that work on AngularJS — one of those new-fangled Javascript frameworks (like Ember, Knockout, Backbone, etc).

In no particular order, here are some thoughts I happened to write down during the two-hour talk:

HTML5 Fallbacks

I noticed a couple of places where Angular seems to be doing something that I know is a planned feature in HTML5 (field-level validation, web history via JS).

At first, I thought this was kind of stupid. What are you going to do when those features become mainstream? I don’t want to have to choose between the proper, standards-specified way of doing something, and the way this framework wants me to do it. That would be super-lame.

Eventually I caught on that they’re providing a framework way to do it, but they seem to be falling back on the HTML5 versions when supported. This was very clear in the web history example, where the speaker mentioned they convert from hash-bang syntax to proper HTML5 history API calls, but I caught a bit of it during the validation example as well.

This is actually kind of cool. They’re making the features available right now, but putting the framework (and by extension, the apps built using the framework) in a position where transitioning to the standard HTML5 solution will be easy when that solution becomes widely available.

In short, you get to use soon-to-be-standard HTML5 features now, and it will be easy to convert your app to use HTML5 standards later. Neat!

HTML5 Future-Mindedness

Along the same lines, the team at Angular seems to have put a lot of effort into helping you get your application (and skillset) ready for the future of HTML5. Here’s an example:

One of the HTML5 features I’m most excited about is Web Components. We’re still at least 6 months away from seeing these in beta release channels (Aurora, Canary, etc), but they’re available in the Safari and Chrome nightlies right now.

Web Components are going to change how plugins and widgets are developed across the web. (It’s going to get a whole lot easier for everyone.) They’ll herald in a fundamental change from Javascript-based widgets (see most jQuery plugins) to HTML/CSS-based widgets that perform better, cause less naming conflicts, and integrate better into both standalone websites and Javascript applications.

What I love, love, love about reusable components in AngularJS is that they follow the same paradigm shift. The way you write and use reusable components in AngularJS looks and feels a whole lot like how you’ll write and use web components in a couple of years.

This is super-helpful for the web developer community. Web components are the future, and Angular’s reusable components are a very similar present.

Good Web Citizenship

My main gripe with a lot of frameworks these days is that they don’t play nice with the rest of their world.

Just today, for example, one of my coworkers went on a rant about how some Node-based packaging plugin he was looking at tried to force its own conventions on the content you’re trying to package. This is a huge no-no! A good framework goes out of its way to make sure it can work with as wide a range of content as possible.

AngularJS is one of the good guys.

Need your HTML to validate? They provide a slightly-more-verbose syntax for that. Want to minify your dependency injections? You can do that too, just add an extra line of code. Want to integrate with jQuery or Node or your favourite test framework? No problem!

The web is a heavily-interconnected place, and it’s nice to see frameworks put some effort into fitting in. People aren’t going to use your library if it conflicts with anything they’re already doing/using.

Dependency Injection!

Did your heart skip a beat when I mentioned this a second ago? It should have.

I’m not going to advocate that all JavaScript applications would benefit from dependency injection, but I bet most of the kinds of apps people build with frameworks like AngularJS absolutely will. You get to write less code, you don’t need to worry about the boilerplate of managing dependencies, and it’s just so much more fun to have a smart library handle this for you.

Even if you’re not a fan of dependency injection, I still think you should be excited about this. We need more experimentation with server-side features. If the success of Node has taught us anything, it’s that JS developers want to write server-ish code if it will help them get the job done quicker. Experimentation must be encouraged!

Unit Testing is a Big Deal

I didn’t count how many times our speaker mentioned unit tests, but I’m fully confident it was at least two dozen times.

I know what you’re thinking: Dan, every framework wants you to write unit tests.

You’re right, but most frameworks don’t put anywhere near this much focus on testing. It’s not some after-thought they tacked on to attract the TDD crowd. There’s support for testing in the docs, and every aspect of an Angular application is fully testable. Our speaker discussed integration with Jasmine, Testacular, and Selenium.

It’s always great to see frameworks (and their communities) encourage testing, and the level of testing support for AngularJS is especially notable for how new(ish) the framework is.

The Usual Suspects

Like every other JavaScript framework ever, AngularJS has all the staples:

  • Template support,
  • data binding,
  • work-in-progress documentation,
  • and a handful of useful UI components.

Next time I find time to build a fun little webapp, I’ll probably give AngularJS a shot. I was seriously impressed by all the thought they put into making their features HTML5-ready, and little extras like dependency injection and seriously overwhelming testing support are just icing on the cake.

I’ve been away from the JS framework scene for a little while now. Did I miss anything? Is this all old news? What are the all cool kids using these days?

Categories
Web Technology

We Still Haven’t Solved Search

Google Search results for "What time is tomorrow's Giants game?"
(click for larger version)

Pictured above is what I see when I search “What time is tomorrow’s Giants game?” on Google.

It’s terrible.

Look at the sidebar on the left. What does it say for location? San Jose, CA. And where are the top two results? New York. Nearly 3000 miles away.

The next two hits have the right team (thankfully), but are both from 2010. I had “tomorrow” right there in my query. This is another missed opportunity.

The next two hits are for the wrong city, again, and rounding out what I saw above the fold is ask.com telling me tomorrow is March 27th. Disappointing.

The bottom three results (the rest of Google’s first page) were equally unhelpful. Beneath that were some ads promoting the Giants, and even mentioning their schedule, which is completely infuriating; why are the targeted ads more relevant than the search results themselves?

So, next time someone tells you that search is a solved problem, or that nobody will ever be able to beat Google, you can remind them that search is hard, and even the Giantest search engine of them all still has a long way to go.

Categories
Web Technology

Sencha Touch and PhoneGap Webinar

A quick heads-up that I’m speaking at a webinar about using Sencha Touch and PhoneGap to build really big, complicated mobile applications. If that interests you, you can register here.

It’s free, and the webinar is this Wednesday, May 2nd, from 2pm—3pm eastern time (that’s 11am—12pm for us pacific folk).

Categories
Web Technology

Browser Trivia Tuesday

I haven’t forgotten about that Windows Phone post. It’s coming. This is a small interlude while I get it juuust right.

Every Tuesday for the past four weeks, I’ve written up some super-geeky browser trivia on Google+. If upcoming jQuery releases and Opera are your thing, you should follow along! The posts are public, you don’t need a G+ account or anything.

I think I’m going to keep this up for the foreseeable future. The research-and-report format is surprisingly fun, and it’s filling in all kinds of gaps in my browser history knowledge. I have no idea if anyone is reading the trivia, let alone enjoying it, but sometimes you just have to do something because you want to do it, you know?

Categories
Web Technology

Interviewed by Chris Brogan

In case you didn’t hear about it on Twitter or Google+ or from me jumping up and down and yelling out loud, I was interviewed the other day by Chris Brogan:

We talked about mobile websites, and went over the basics for businesses looking to get into the mobile web space.

I tried my best to not look and sound completely starstruck. I’ve been reading Chris’s blog since 2008, and for those of you that aren’t (a little too) obsessed with blogging, he’s kind of a big deal.

It was a lot of fun, and surprisingly easy to set up. I think I might do a bit more video-stuff in 2012. What do you think?

Have a good weekend!

Categories
Web Technology

Brand New Adobe

Adobe is changing. The once-great giant of web and web tools has fallen, and is poised to rise again — albeit in a much different form. What does this mean for us web developers?

For starters, let’s go over some recent news. Adobe made three major announcements in the past six weeks that will have sweeping implications on their image. See if you can spot a trend in these headlines:

What do these press releases have in common? If you caught that all three are about open technology, give yourself a pat on the back. Let’s dig into the facts before discussing the ramifications.

Adobe has seen the light, and open source is sparkling.

Closed formats are dying across the web. The days are numbered for plugins like Silverlight and Flash; they’re simply not necessary anymore for the vast majority of sites and applications. HTML5, on the other hand, is thriving. We’re starting to see open fonts pick up, and even longtime-stalwarts MP3 and MPEG-4 are starting to lose their grasp of the online audio/video markets.

Adobe isn’t blind. They know they need to transition away from closed platforms. Picking up PhoneGap shows their commitment to this cause.

Re-aligning their mobile efforts towards HTML5 is another positive step towards open technology. Adobe still makes some of the web’s best tools, and Javascript development could seriously use an outstanding IDE. This seems like a great match-up.

Finally, releasing Flex to the community is a smart move. There is a very vibrant community around Flex, and there are still niches where RIA will matter for a little while longer. If Adobe can’t support Flex on its own, enabling the community to take control of it’s own future simply makes sense.

Adobe’s intentions are clear. Proprietary formats are out, the open web is in.

What does this mean for web developers?

Three things:

First and foremost: Learn your shit. If you’re a web developer, learn everything you can about Javascript, HTML5, CSS3, and the myriad of related frameworks. These will only become more important following the fall of Flash.

Second: If you’re a Flash/Flex dev, start looking at Sencha. At SenchaCon last month, the number-one answer I got back when I asked people what they worked in before switching to Sencha was Adobe Flex. And I believe it. I’m a Flex guy too, but that market’s shrinking quickly. Sencha is going to be a major player on the web for a while to come, and it’s a relatively smooth transition.

Third: Get into mobile. Adobe didn’t pick up PhoneGap just to gain FOSS-cred. Mobile is huge. Huge! This is where you want to be right now, and you can join in using Javascript and Sencha and many other web technologies.

This is an exciting time to be in web development. Let’s keep on top of the constantly-changing platforms and tools. Let’s keep building wonderful things. Let’s make this an age to be proud of when they talk about the day Adobe changed their ways.

Who’s with me?

Categories
Web Technology

My SenchaCon Hackathon Entry

The last day of SenchaCon was a hackathon, where everyone that stuck around (probably over 100 people) grouped together and hacked away to see who could make the coolest one-day project. There were a LOT of great apps, and several came away with cash and prizes (all of it very well earned!).

Not featured in the winners list is the app I made, because I missed the submission deadline by about twenty minutes. All this because I lost far too much time debugging issues with HTML5’s native drag-and-drop API. (I was planning on writing a rant about it, but Quirksmode beat me to the punch.)

In any event, I’ve uploaded the incredibly raw creation, and you can now play my simple HTML5 Video Puzzle Game. I only tested in Chrome, but it seems to run alright in the latest Aurora build of Firefox. Basically the app loads up an HTML5 video, slices it into 16 canvases, and scrambles the pieces. Your job is to re-arrange them by dragging them back into place (using HTML5’s native drag-and-drop, of course).

It’s really, really unpolished. I spent all of about 8 seconds on the styling, and there are a lot of features that are complete but inaccessible (like slicing the video into more pieces). I might try to fix it up later.

Anyway, the whole day was a lot of fun, just like the rest of the conference. It would be awesome to go again next year. We’ll see!

Until then, happy hacking, all my fellow attendees!

Categories
Web Technology

Speaking at SenchaCon 2011

Most Sencha Touch applicaions are small, single-purpose mobile apps. Those aren’t the ones I’m talking about.

Over the past 9 months, I’ve worked on a Sencha Touch app with a team of 15 people. It’s for a major, world-famous client. It contains tens of thousands of lines of code. It could be the biggest Sencha Touch app ever built.

My talk will be about how we built it, and how we made it perform well despite the sheer size of the application.

If you’re at SenchaCon, and this sounds like something you want to know more about, here are the details:

Time:
11:35am — 12:20pm

Session Name:
Community Code: Macadamian

Location:
Grand Ballroom, Section 3, 6th Floor

Hope to see you there. I’ll be the guy glowing with enthusiasm :)

Categories
Web Technology

Classics Week #3: Opera vs Reality

This post is part of the Classics Week(s) feature, which will run for three weeks while I’m off overseas. This week’s post was the first to be published after the switch to regular, weekly updates. Here it is again, better than ever!

2009 was an exciting year for the web browser crowd:

  • Google released Chrome.
  • Apple ported Safari to Windows.
  • Firefox picked up a lot of market share.
  • Microsoft actually produced a half-decent version of Internet Explorer.
  • The iPhone and Android finally made mobile browsing popular.
  • Support for HTML5 and CSS3 was way up across the board.

The term crowd is especially appropriate here because it really is starting to get very crowded. For a long time the browser war has been fought largely between two major players at a time (IE/Netscape, IE/Firefox) and all of a sudden we have four major companies with fantastic browsers available to the vast majority of users.

Oh, and then there’s Opera.

Here’s the thing about Opera…

Opera is in serious trouble because it doesn’t have a “thing”:

Internet Explorer’s thing is its existing market share. It has a lot more users than everyone else, so its going to be relevant for the foreseeable future.

Firefox’s thing is its community. Not just its core developers, but the people who create addons or personas or rally everyone they know to go download the latest version on launch day. It’s easily the most passionate user group of the bunch.

Chrome’s thing is its brand. When people think web, they think Google. Google has the best search, the best email, why not the best browser? Users rely on Google for a great online experience, and Google has a lot of high-traffic areas where it can push Chrome.

Apple’s thing is its loyalty. Apple fanboys are a loyal bunch — most of them will stick with Safari on their Mac and many will consider getting Safari for any Windows computers they’re forced to use. Apple also has the iPhone, which gives it a growing space where it has the only browser (not that any iPhone users mind — loyalty, remember?).

What does Opera have? The Wii? Please.

  • It used to be the most advanced browser for HTML5 support, then everyone else caught up.
  • It used to be a major player in the mobile space, then Apple and Google obliterated it.
  • It used to be a fun browser for geeks to talk about, but now the buzz is all Chrome.

Simply put, it’s not enough to be an alternative to IE anymore; users are demanding more from their browsing experience, and they’re flush with places to find it.

Any Opera fans out there?

What’s even worse is that there isn’t really anything you or I can do to help.

Opera’s engine isn’t open source, like Gecko (Firefox) or Webkit (Chrome/Safari), and it doesn’t benefit from a strong plugin community, like Firefox/Chrome. It isn’t an OS-default browser like IE (Windows), Safari (OSX) or Firefox (linux). Even if I wanted to rally some Opera enthusiasts, where would I start? How many people do you know that have even heard of Opera?

I don’t have anything against Opera (it’s a fine browser), it’s just it has fallen behind the times — there are too many better options around preventing Opera from picking up new users, and I can’t think of a single significant reason for its existing users to stick with it.

Do you use Opera? Care to share any thoughts on Opera’s future?