background preloader

Understanding Design Patterns in JavaScript

Understanding Design Patterns in JavaScript
Today, we're going to put on our computer science hats as we learn about some common design patterns. Design patterns offer developers ways to solve technical problems in a reusable and elegant way. Interested in becoming a better JavaScript developer? Then read on. Republished Tutorial Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. Solid design patterns are the basic building block for maintainable software applications. A design pattern is a reusable software solution Simply put, a design pattern is a reusable software solution to a specific type of problem that occurs frequently when developing software. patterns are proven solutions to software development problems patterns are scalable as they usually are structured and have rules that you should follow patterns are reusable for similar problems We'll get into some examples of design patterns further in to the tutorial. Take a look at the three examples above.

Basic Branching and Merging Let’s go through a simple example of branching and merging with a workflow that you might use in the real world. You’ll follow these steps: Do work on a web site.Create a branch for a new story you’re working on.Do some work in that branch. At this stage, you’ll receive a call that another issue is critical and you need a hotfix. You’ll do the following: Switch to your production branch.Create a branch to add the hotfix.After it’s tested, merge the hotfix branch, and push to production.Switch back to your original story and continue working. Basic Branching First, let’s say you’re working on your project and have a couple of commits already. You’ve decided that you’re going to work on issue #53 in whatever issue-tracking system your company uses. $ git checkout -b iss53 Switched to a new branch "iss53" This is shorthand for: $ git branch iss53 $ git checkout iss53 You work on your web site and do some commits. $ vim index.html $ git commit -a -m 'added a new footer [issue 53]' Basic Merging Note

When to Avoid the Descendant Selector Those of us who have started using modular or object-oriented CSS principles have learned to avoid, as much as possible, the use of the descendant selector (or, more accurately, the descendant combinator). A selector that uses the descendant combinator looks like this: Everything you see before the opening curly brace is the selector. The combinator in this case is the space character. Now that we have a technical understanding of the selector itself, let’s discuss what to keep in mind when deciding to use this selector. Why is the Descendant Selector Restrictive? To understand why the descendant selector can cause problems, look at the example I used above. That’s pretty strict. This is outlined in the OOCSS wiki, when discussing the separation of “container and content”. Does OOCSS Discourage Use of the Descendant Selector? This question is covered in the OOCSS FAQ. No–descendant selectors are not discouraged, but putting them too high in the DOM tree is. No Dogma Here

Key Principles of Maintainable JavaScript JavaScript is a curious language. It's easy to write, but difficult to master. By the end of this article, hopefully, you'll transform your spaghetti code into a five-course meal, full of readable, maintainable yumminess! Why is it So Tough? The thing to remember, above all else when writing JS code, is that it's a dynamic language. The "hardness" of JavaScript is clearly evident when considering the following image: The teeny tiny book on the left is Douglas Crockford's MUST READ book, JavaScript: The Good Parts. While both of these books are excellent reads, The Good Parts illustrates that, although JavaScript has a LOT of stuff in it, the good parts can be summed up in a considerably shorter read. This, naturally, led to a lot of sleepless nights for web developers. You can read an article on the history of JavaScript here, but the gist of it is that Brandon Eich, in 1995, was hired by Netscape to design a language. It's time to fix that! Making it Better Namespaces Observer Pattern

JSPatterns.com OK Computer Solutions Setting Up A Staging Environment It's common practice to work locally on a project and push revisions to a production server, but the step that people often skip is the staging server. A staging server is a mix between production and development; you get to test your app as if it were in production. Let's review some of the issues that you'll have to consider, as well as the steps needed to replicate a production Platform as a Service (PAAS). It has happened more than once: I push a revision of my app into production, only to find a problem after it's public. These issues can be as simple as forgetting to add images to your repository, or it might be as large as changing a database's structure locally and forgetting to update the production database. Staging environments not only catch human errors, but also software-related issues. You can find and fix these issues because the staging area has the same software as your production environment. So how do you go about setting a staging server up? Apache 2.2PHP 5.4Composer

JS: The Right Way Learning JavaScript Design Patterns Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language. One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve. Design patterns also provide us a common vocabulary to describe solutions. In this book we will explore applying both classical and modern design patterns to the JavaScript programming language. Target Audience This book is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language. Some of the concepts covered (closures, prototypal inheritance) will assume a level of basic prior knowledge and understanding. Acknowledgments Credits Reading Patterns are not an exact solution. Creational Design Patterns

MonoDevelop - MonoDevelop Testing Like a Boss in Laravel: Models If you're hoping to learn why tests are beneficial, this is not the article for you. Over the course of this tutorial, I will assume that you already understand the advantages, and are hoping to learn how best to write and organize your tests in Laravel 4. Version 4 of Laravel offers serious improvements in relation to testing, when compared to its previous release. This is the first article of a series that will cover how to write tests for Laravel 4 applications. Setup In-memory database Unless you are running raw queries on your database, Laravel allows your application to remain database agnostic. With Sqlite, we can set the database connection to :memory:, which will drastically speed up our tests, due to the database not existing on the hard disk. In short: an in-memory database allows for fast and clean tests. Within the app/config/testing directory, create a new file, named database.php, and fill it with the following content: Before running tests The Tests Post model Post tests

Overview Background In Square’s new engineer onboarding program, which we call NEO, we offer short courses and lectures on a variety of tools that we use at Square. We started to collect notes from our course on D3.js and found the notes were well-suited for a tutorial — and worth sharing. Introduction The tutorial provides a quick intro to D3.js, a Javascript library for creating data visualizations in the browser. D3 is built on top of common web standards like HTML, CSS, and SVG. D3 makes web-based visualizations easier by “automating the hard bits you already understand,” as opposed to “hiding the hard bits” (hat tip @andy_matuschak). Again, the tutorial is not a deep dive — we want you to learn how to learn D3 and gain a high-level understanding of this useful tool. Let’s get started!

A deep dive and analysis of the JavaScript Module pattern Monday, March 15th, 2010 <>p>Ben Cherry has a really nice detailed analysis of the module pattern. He starts with the simple pattern that Crock-y documented back in the day….. and then goes on to discuss augmentation (loose and strict) and then deeper into some cool patterns: Nice work Ben! Strategies for Testing IE on Different Platforms You might believe that web developers who use Windows as their primary OS have it easy, when testing Internet Explorer; simply click on the blue "E" and go to town. That might be true if they only had to worry about the version of IE on their PC, but we all know that's not the case. Depending on your project's needs, you may need to ensure compatibility from IE6 through IE10, which certainly poses some challenges. How do we deal with this? Now if you're on Windows, you definitely have a leg up because at the very least, you can natively test a specific version of IE, but it's a whole different ballgame if you're on a Mac or Linux box. What I want to do is explore the various ways of testing Internet Explorer across popular platforms, and offer suggestions on how to lower the friction of testing for multiple versions of the browser. Versions, Versions, Versions... We all know testing is hard. Virtual machinesVirtualized browser sessions My First Goto Tool for Testing Virtual Machines

Writing Testable JavaScript The engineering culture at Twitter requires tests. Lots of tests. I haven’t had formal experience with JavaScript testing before Twitter, so I’ve been learning a lot as I go. In particular, a number of patterns I used to use, write about, and encourage have turned out to be bad for writing testable code. So I thought it would be worthwhile to share a few of the most important principles I’ve developed for writing testable JavaScript. Avoid Singletons One of my most popular posts was about using JavaScript Module Pattern to create powerful singletons in your application. For example, consider the following singleton module (contrived example, of course): With this module, we may wish to test the foo.bar method. When running this test suite, the assertion in the length test will fail, but it’s not clear from looking at it why it should. Now, your test suite will look like this: Avoid Closure-based Privacy Another pattern I used to promote is real private members in JavaScript. Conclusions

Related: