background preloader

Brian Ford

Brian Ford
The AngularJS documentation is great for getting started and for looking up specific API calls. However, it doesn't really tell you how to organize and manage your app as it grows to tens or hundreds of thousands of lines of code. I've collected here some of my observations and best practices for how to manage your sprawling application. First we'll take a look at organization, then move on to some tips on improving performance, and conclude with a brief summary on tools, servers, and build processes. While this post will focus on big apps in particular, there's a great video on YouTube from the December 2012 AngularJS meetup on best practices that's also worth checking out. Don't Write a Huge App The best advice about huge apps is not to make them. Organization Probably the biggest question with large apps is where to put all of that code. Directories This is the typical folder layout that I recommend: Files I would make an exception for closely related directives. Modules Dependencies Models

Fuse.js | K. Risk - JavaScript Refined Lightweight fuzzy-search, in JavaScript. Download: fuse.js - (9 kb) development fuse.min.js - (1.58 kb) production Why? If you need a lightweight, fast way to search through a list of items, and allow mispellings, then Fuse.js is for you. Try it out! Given this list of books, try searching by misspelling the title or author’s name: The results are sorted by score. Usage Suppose you have the following data structure: Example 1 Search and return a result list of identifiers Example 2 Search and return a result list of records Example 3 Search over a flat array, and return the indices Options keys List of keys (properties) that will be searched. Limitations This isn’t meant to work across hundreds of thousands, or millions of records. Note: the pattern string cannot exceed 32 characters. How does it do it? Currently, it uses a full Bitap algorithm, leveraging a modified version of the Diff, Match & Patch tool by Google. To do Currently planning to make it faster, and work for larger sets of data. Problems?

7 Ways to be Successful with AngularJS | Learn AngularJS After learning and building a few projects in AngularJS, I’ve distilled my experience into these 7 ways to be successful with your AngularJS project. 1) Use Grunt Yes I know this is a blog about AngularJS and my first point is about another tool, but I feel it’s that important. Grunt is a great tool for your AngularJS app providing a number of incredibly useful tools that can be configured in a matter of minutes. One of Grunt’s great strengths is the ability to be productive immediately while still being extensible and flexible enough to support large and complex projects. The key grunt tasks are concat, watch with livereload enabled and grunt karma (more on this later). The description here is for a development setup, there are additional considerations when building your app for production (things like minification, image optimization etc.) grunt karma provides a very nice wrapper around the karma test runner for running your unit tests. 2) Write Your Tests from Day 1. 5) Use Filters

Jehu/ng-mobile AngularJS Tutorial: Learn to Rapidly Build Real-time Web Apps with Firebase In response to the feedback from our original tutorial, we decided to take the new version of the tutorial in an entirely new direction. Mucking around in backend code doesn't belong in an AngularJS tutorial, and we've found an elegant solution to this problem. This tutorial will guide you through the process of creating a frontend-only application. Firebase’s firebase.js and angularFire.js libraries offer an entirely new flavor of application: an app built with no backend server or code. The only parts of this application are the AngularJS app, the Firebase data store, and the minimal backend server to deliver the assets to the browser. Our intention with this tutorial is to provide the AngularJS community with instructions on how to design and build an ultra-modern application. The application you are building will go beyond basic use of AngularJS, and we will attempt to explore as much of the framework as possible. The tutorial is a living thing, a work in progress. app/js/config.js

Jens Rantil's Hideout Lately I've been working a lot in AngularJS. This is my second project with the framework, and the more time I spend in it, the more I like it. But as with most things, AngularJS has some rough corners. Its documentation still has a long way to go, although it has improved since last time I used it over a year ago. My intention with this blog post is to go through one such use case, namely dealing with complex dependencies. The level of this tutorial is intermediate. A slow service Let's say you have some data you would like to present to your user and you prepare some data in your controller. This is very basic AngularJS and I expect you to have no problems understanding the mapping done here. But in the real world, we rarely hardcode things. Now, let's create a service that simulates a slower API call. Notice that it takes a couple of seconds before the result is presented on the screen when you click "Result". Obviously, we are not generating any errors here, but you never know!

A Better Way to Learn AngularJS Congratulations on taking the plunge! This AngularJS course is built with the intent of exposing you to the best available resources on each Angular topic. Our desire is to present these topics richly, and from a variety of vantage points, in order to afford you a more complete perspective on them. The learning curve of AngularJS can be described as a hockey stick. With AngularJS, the “Ready, Fire, Aim” learning methodology of duct taping together a handful of tutorials and a cursory glance through the documentation will lead to confusion and frustration. Moderate knowledge of HTML, CSS, JavaScript, including the following concepts: The POJO (plain old JavaScript object), including:OOP, including encapsulation and inheritanceObject creation, prototypesBasic Model-View-Controller conceptsThe Document Object ModelJavaScript functions, events, error handling AngularJS is not a library. It doesn’t abstract away HTML, CSS, or JavaScript. Check these boxes to keep track of your progress

AngularJS Abstractions: Organizing Modules Now that we know a bit about how modules work at an API level, we can look at questions that will be asked more than once in the lifetime of a project, like when to create a module, how many modules to create, and how to organize source code files for a module. One thing to recognize early on is how much flexibility is available. Although the term "module" sounds like the JavaScript module design pattern (a single function inside a single file), there is nothing about an AngularJS module that requires all the code for a module to exist in a single file, or in a single function. Your code can use multiple JavaScript modules to add features to a single AngularJS module. The code below is creating an alerter service to add to the patientApp.Services module, and could be one of many such pieces of code scattered across various files. Given this amount of flexibility, there are no real limitations on the number of modules and files you create. Reference Material

The Next Big Programming Language You’ve Never Heard Of | Enterprise Getty Andrei Alexandrescu didn’t stand much of a chance. And neither did Walter Bright. When the two men met for beers at a Seattle bar in 2005, each was in the midst of building a new programming language, trying to remake the way the world creates and runs its computer software. That’s something pretty close to a hopeless task, as Bright knew all too well. Alexandrescu, a graduate student at the time, could’ve said the same thing to Bright, an engineer who had left the venerable software maker Symantec a few years earlier. Andrei Alexandrescu.Photo: Ariel Zambelich/WIRED The result is a programming language that just might defy the odds. C++ is an extremely fast language—meaning software built with it runs at high speed—and it provides great control over your code. Among the giants of tech, this is an increasingly common goal. In the past, the programming world was split in two: the fast languages and the simpler modern languages. The Cape of a Superhero For Alexandrescu, D is unique.

AngularJS on Rails 4 - Part 1 - coderberry AngularJS seems to be the big craze as of late. Some may agree and some may not, but AngularJS is one of the next big contenders for being the number one choice of developers. At the time of writing this article, AngularJS is the 15th most watched project on GitHub . A few days back, I presented at our local ruby users group on writing an API-driven Rails app with AngularJS on the front end. Here I want to create a useful Rails application using AngularJS. The title of the article states that we will be using Rails 4 in our application. Creating the Rails Application I had a hard time deciding when I began this project on whether to use a full Rails application or a very lightweight ruby web stack like Sinatra . Before anything, we need to install the rails-api gem in order for us to create our app. $ gem install rails-api Once that is installed, lets create a new Rails application called Angular Casts $ rails-api new angular_casts $ mkdir -p app/assets/javascripts Create the Model $ rake test

Kickstart Your AngularJS Development with Yeoman, Grunt and Bower Whether you love or hate it, there’s no denying that AngularJS is the framework on every developer’s lips. It may not be for everybody, but AngularJS has a quirky, efficient and powerful feature set. Couple that with a few useful development tools like Yeoman, Grunt and Bower and you’ve got yourself an incredibly fast rapid prototyping process. What we’ll cover This AngularJS tutorial will cover: Generating a bare bones AngularJS app with YeomanUsing Grunt to speed up development and help perform repetitive tasksUsing Bower to add third party plugins/frameworksMaking minor changes to your AngularJS app Prerequisites To get the most out of this tutorial we recommend you have the following skills and resources available: A terminal and basic knowledge of the command lineNodeJS and NPM installedFundamental JS, CSS and HTML knowledge Files You can find a repo of this tutorial project here. Let’s get started yo! Alright, let’s get this thing underway. npm install -g yo grunt-cli bower Yeoman yo angular

Code Organization in Large AngularJS and JavaScript Applications — Cliff Meyers Many developers struggle with how to organize an application's code base once it grows in size. I've seen this recently in AngularJS and JavaScript applications but historically it's been a problem across all technologies including many Java and Flex apps I've worked on in the past. The general trend is an obsession with organizing things by type. Let's take a look at angular-seed, the official starting point for AngularJS apps. css/img/js/ app.jscontrollers.jsdirectives.jsfilters.jsservices.jslib/partials/ The JavaScript directory has one file for every type of object we write. This is a mess. The next logical pass at organizing JavaScript involves creating a directory for some of the archetypes and splitting objects into their own files. Let's imagine we're building a simple e-commerce site with a login flow, product catalog and shopping cart UI's. Nice! Imagine you're at the office and realize you need a few outfits dry-cleaned for a business trip tomorrow morning.

Related: