Let's take advantage of those new technologies provided by HTML5 to built impressive user-friendly WebSites and WebApps.
If you are a dev in your company who creates custom intranet or internet solutions this topic might be interesting for you. There are existing Desktop applications in need to be transformed into Rich Internet Applications, that's for Java, .Net, Python, C++, etc. based Apps alike.
Let's create a foundation of knowledge that helps you keeping track of what's happening out there and which purpose can be solved by those frameworks.
Follow me into a journey of developing solid Business Layers for your HTML5 needs!
This article is a tutorial of how to set up the knockout.js environment in a MVC4 application and perform CRUD operations on it.
I have been browsing multiple sites for a complete end-to-end tutorial or article upon CRUD operations using Knockout.JS and MVC 4. Unfortunately all I found were incomplete or short explanations. In my last article we learned about imlementation of CRUD in ASP.Net web forms using MVC and EntityFramework. This article is the continuation of the series. My effort in this article will be a kind of tutorial to explain how to set up the knockout.js environment in a MVC4 application and perform CRUD operations on it.
While the source code for emojitracker has been open-source since day one, the technical concepts are complex and varied, and the parts of the code that are interesting are not necessarily obvious from browsing the code. Thus, rather than a tutorial, in this post I intend to write about the process of building emojitracker: the problems I encountered, and how I got around them.
I’d been playing around with the idea of realtime streaming from the Twitter API on a number of previous projects (such as goodvsevil, which was the spiritual predecessor to emojitracker), and I was curious about seeing how far I could push it in terms of number of terms monitored. At 842 terms to track, emoji seemed like a prime candidate.
Emoji are also a great way to get insight to the cultural zeitgeist of Twitter: the creative ways in which people appropriate and use emoji symbols is fascinating, and I hoped to be able to build a lens that would enable one to peer into that world with more detail.
* Background Understanding: Emoji and Unicode
* Emojitracker Backend Architecture Feeding the Machine: Riding the Twitter Streaming API Data Storage: Redis sorted sets, FIFO, and Pubsub streams Pushing to Web Clients: Utilizing SSE Streams Performance Optimizations for High Frequency SSE Streams Gotcha: Many “cloud” environments don’t properly support this (and a workaround) Not crossing the streams: The admin interface
* Frontend Architecture * Frontend Performance * Deploying and Scaling * Things I’d still like to do * Reception and conclusions
Nunjucks does a lot of things, like loading templates, calling filters, and more. All of this is synchronous by default (which isn't a problem for loading templates, since they are loaded once and cached forever). This limits what you can do in filters and template loaders, since you can't use any async functions.
Asynchronous templates can be paused in the middle of rendering and resumed later.
This hasn't been a problem for a long time, and for most people never will be a problem. You don't want to mix too much logic with your templates, so you usually do all the complicated async work in a controller and pass the data to the template.
However, I can imagine sites that are heavily template-driven and developers wanting to wrap up some sort of behavior that depends on an async operation into a filter or custom tag. Nunjucks is built to allow people to add logic to their templates as needed, and works great for large content-heavy projects where not everybody is familiar with the backend.
Regardless, I think asynchronous control is an interesting feature that doesn't adversely effect existing templates, so I decided to dig into it. Here's what I came up with.
By leveraging the Node.js middleware “express”, we can create functionality for viewing, adding or deleting JSON data.
The goals for this article are: * Allow the user to view all data in the database * Allow the user to make a JSONP call to get all data * Allow the user to add a new name to the Sales database * Allow the user to delete all data in the database
When completed, this will be far from a robust or production-ready application, but we will, at minimum, learn how to view / add / delete data in our MongoDB database, using clean URLs in the browser.
Backbone.Notifier was born as part of JSNAIL.IT (not live at the moment, maybe will revive it some day), an independent project I've worked on. It started as a component I were quite pleased with, and thought it may be also useful by others, so I've decided to add some features, make it completely independent and open it's source.
After years of working and using dozens of open-sourced projects, I'm glad to contribute to this amazing community and hope you'll find it useful. Feel free to contact me for any purpose.
I would like to show you how Chosen can be quickly integrated into your EmberJs application together with Twitter Bootstrap.
Chosen. One of the controls we wanted to use was Chosen. “Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.” It allows you to have nice multi-selects that look like one below:
As a citizen of Toronto, the past few weeks (and months) have been interesting to say the least. Our mayor, Rob Ford, has made headlines for his various lewd remarks, football follies, and drunken stupors. With an election coming up in 2014, I was curious as to how the rest of Toronto felt about our mayor.
Collect data from Twitter, making sure we only use tweets from people in Toronto. Plot those tweets on an electoral map of Toronto’s wards, colour coding the wards based on how they voted in the 2010 Mayoral Election.
* Repustate’s API (for data mining Twitter and extracting sentiment, of course!)
* Shapefiles for the City of Toronto including boundaries for the wards
Jan Hesse's insight:
Using Twitter, GeoJSON (via GDAL) and d3 to visualize data about Rob Ford
This influences Picasso as they work together and Picasso starts switching things up and begins adding cubism files to the codebase. The codebase is so new that Picasso and Dali can continue adding new files at any time with no harm, because there is no maintenance when it’s just two engineers adding new functionality. No one is stepping on each other’s toes. There’s enough paint for everyone.
Then you hire Monet and he comes in and leaves his impression on everything.
To my own surprise I already got a lot of interesting feedback to my first introductory post in the series. Instead of replying directly to the individual comments I prefer to write a specific blog post and reason a bit about my motivation.
I want to take a minute and reflect on some of the comments. I allow myself to paraphrase some of the comments
D3 a very powerful tool and at times can be a bit overwhelming. Today I would like to simplify things by walking you through building a bar chart using D3.
First step is to create a barChart directive.
It will will take an data array and add a svg tag to our element. We will using this svg to build our chart.
D3 allow us to resize our data to the portions of the SVG using d3.scale. We tell the scale the upper and lower bounds of the dataset using domain and the upper and lower bounds of the chart using range. Using x and y functions generated from d3.scale.linear(), we can then place bars in the right spot on the SVG.
Tutorial on how to write behavior driven tests of ExtJS 3.4 components with Jasmine.
Developing your own ExtJS components for your application is more fun and results into more resilient code if you write them hand-in-hand with test code. A solid test basis can also facilitate the task of refactoring your software.
* How this works * Tampering with this * Scoping this * Other Issues?
Well, how those frameworks revolutionised DOM access,Knockout aims to revolutionise user interactions. By providing a simple two way binding mechanism between your UI and your view model, Knockout takes care of all the wiring and event binding to keep the two constantly in sync.
What follows is a two-part guide to creating a sample application, Slidr (a simple slideshow generator), that demonstrates some of the core features that most developers would use in real life. Starting with the fundamentals of Knockout and leading on to integrating Knockout with existing third party UI components. By the end you’ll be sure to be saying “oh … my … god!” once again.
Jan Hesse's insight:
Part 2 -
Integrating Knockout.js with third-party libraries:
When developing a Backbone.js mobile web app recently, I needed to create a unique history state without a unique URL when opening an overlay. This was done to allow the user to hit back in the browser and be returned to the view which launched the overlay. While solving this problem, I landed upon a concept of microstates which I thought might be of interest to other web app developers.
In this post I will first give an overview of the HTML5 History API, then talk about how to create a microstate in a Backbone app, and conclude with the implications of exposing microstates.
As we already know, AngularJS doesn’t come with an out of the box solution for data modeling. In the most abstract way, AngularJS lets us use JSON data as a model in the controller. As the time passed and my application grew, I realized that this modeling method isn’t powerful enough to fit my application’s needs. In this article I will present the way I dealt with data modeling in my AngularJS application.
As long as the book’s structure and methods are relevant only to one controller, all is fine and our work here is done. But as the application grows, there might be other controllers that will deal with books. Those controllers will sometimes need to fetch a book, update it, delete it or get it’s image url or availability. Therefore we have to share the behaviors of a book between controllers. In order to do this we will use a factory that returns the book’s behavior. Before writing this factory, I would like to mention here that we could make the factory return an object that contains helper methods for book (i.e. functions that get a book JSON and do what asked), but I prefer to use prototype for constructing a Book class, which I believe is the right choice:
“We want to be able to ask questions to our data, without predefining the way we structure our data” - an argument for “No”-SQL, put forward in this very nice talk on ElasticSearch by Shay Banon.
Still, today we often use SQL, and it is required that you predefine your schema or structure your data beforehand. This means to query data, you must add and remove attributes from a schema, define how data is connected (or how data can be joined) to run actual queries.
And if you want to do this with Node.js, you often were left alone with your RDBMS backend. Not anymore, since thanks to Tim Griesser, there are a number of fresh ideas for working with data in Node.js. Let’s have a look at Knex and Bookshelf.
I’ve been doing some stuff with AngularJS and one of the key ideas is dependency injection. Here’s a deconstruction of injector.js which contains all the functions and classes for dependency injection.
The biggest problem I have with dynamically typed languages is that there are no type hints written out. With AngularJS’s implementation of dependency injection, the dependencies are passed around as the first items in a list followed by the function which dependencies on them. Instead of talking about them as functions (which have no dependency) or arrays where the last item is a function or calling it “array notation”, it would be helpful to create a type that represents them. Not a class, but a type. This would give it a name and make it easier to refer to.
Alternatively, contracts could be written for functions and methods that would state how to make a valid call to a function.