JavaScript for Li...
Follow
Find
158.9K views | +252 today
Scoop.it!

AngularJS: Shopping List Application - Part 1

AngularJS: Shopping List Application - Part 1 | JavaScript for Line of Business Applications | Scoop.it
A guide to creating your first AngularJS application. This part will show you how to create the HTML, CSS & AngularJS taking data from a JSON object.
more...
No comment yet.
JavaScript for Line of Business Applications
Keeping track of current JavaScript Frameworks that help design your clientside Business Logic Layers.
Curated by Jan Hesse
Your new post is loading...
Scoop.it!

9 Minimal Frameworks for Front-End JavaScript Development

9 Minimal Frameworks for Front-End JavaScript Development | JavaScript for Line of Business Applications | Scoop.it

Imagine for a second the fact that, five years ago, we already had frameworks like jQuery to play with, and while not as functional and feature rich as today – it was already possible to configure and play with the web in hardly imaginable ways.

Today, there are literally hundreds of thousands of frameworks available to anyone who is brave enough to learn something new. Yes, most of them play very tiny role in the collective evolution of web development, but even that tiny contribution counts.

Front-end is not just about HTML & CSS, it involves creativity just as much as it involves writing code in JavaScript, PHP, Python or any other programming language of your choice.

Have a look at my post on the top web programming languages in 2014 – if you’ve been following the trend, it will not be hard to see that most of those languages have held the top spot for over a decade.

I’m sure you know a lot of this stuff already, but it doesn’t hurt to refresh your memory and bask in a little bit of nostalgia from time to time. If you think that I didn’t mention your favorite framework because I hate you: surprisingly, you’d be right!


* AuraJS
* Kraken
* min.js
* Reactive Coffee
* Responsive
* scaleApp
* skelJS
* Spine
* Stapes.js

more...
No comment yet.
Scoop.it!

How I Setup Angular + Node Projects

How I Setup Angular + Node Projects | JavaScript for Line of Business Applications | Scoop.it

When I first started building apps that used the Angular JS + Express + Mongo + Node setup... the helpful resources on how to do so we're scarce.

Anyhow, depending on the level of interest, I'll continue walking through how I setup everything from accounts to security to payments to SSL. But for now, all this is is setting up the development environment. Just getting all the pieces can often turn into a nightmare, so I wanted to share how I do it. This setup covers the following:

* Making the server nothing more than a REST service
* Keeping all tools and generators easily updated and independent
* Making deployment relatively simple.
* Have unit tests available separately for the front-end. (if you're in to that type of thing)
* Uses the magic of Yeoman and Generators for quick scaffolding.
* Read #5 again. Because Yeoman is that cool.

more...
No comment yet.
Scoop.it!

Getting Started with Backbone.js and Rendering a Collection using View

Getting Started with Backbone.js and Rendering a Collection using View | JavaScript for Line of Business Applications | Scoop.it

In the current era of web application development, Single Page Applications (SPAs) are often demanded by customers. Currently there are lots of different frameworks available for developing web applications, most of these are server side frameworks e.g. ASP.NET MVC. But one of the important aspects for Web development is to provide a Rich user interface with UX (user experience). Thankfully there are several JavaScript client side frameworks available to get this thing done e.g. jQuery, Knockout, Backbone etc. Using these frameworks, a developer can develop Rich and better UX applications.

more...
No comment yet.
Scoop.it!

How to Create Custom HTML Elements

How to Create Custom HTML Elements | JavaScript for Line of Business Applications | Scoop.it

An exciting feature of the HTML specification that’s been getting a bit of hype recently is custom HTML elements. These allow you to create your own HTML elements along with their own JavaScript API. This can be useful when building interfaces with components that are reused throughout an application.

In this blog post you’re going to learn how to create your own HTML elements and define a JavaScript API for them.

* Creating Custom HTML Elements
* Creating a JavaScript API For Your Element
* Extending Existing Elements
* Custom Element Callback Methods
* Custom Elements with Shadow DOM
* Browser Support for Custom HTML Elements
* Final Thoughts
* Useful Links

more...
No comment yet.
Scoop.it!

Learn to refactor your AngularJS code.

Learn to refactor your AngularJS code. | JavaScript for Line of Business Applications | Scoop.it

Mistakes:

Do any of the following sound familiar?

* It’s hard to debug your view, because you have no idea where that Scope member is coming from
* When you inspect a Scope, you double-take because you thought it was the window object
* You at some point needed to access a child Scope member from a parent Scope, so you either either a) used $broadcast/$on to call it, or b) just moved the member into the parent Scope
* It’s unclear what is happening after any given user action, because there are umpteen-hundred events being emitted or broadcast
* There’s at least one service that is 1,000 lines long and is full of just random settings
* You either have one entry point into $http, or $http calls are scattered about controllers


These are all mistakes, and they are easy mistakes to make. The solution to all of these problems is the same: refactor.

Jan Hesse's insight:

by the same author:

13 Steps to AngularJS Modularization:

http://blog.safaribooksonline.com/2014/03/27/13-step-guide-angularjs-modularization/


Writing Tests and Stomping Bugs in AngularJS:

http://blog.safaribooksonline.com/2014/04/01/writing-tests-stomping-bugs-angularjs/

more...
No comment yet.
Scoop.it!

ReactiveElements - Tiny add-on to X-Tag to use React.js like a WebComponent

ReactiveElements - Tiny add-on to X-Tag to use React.js like a WebComponent | JavaScript for Line of Business Applications | Scoop.it
Lightweight Mozilla X-Tag add-on which allows to use React.js components as custom HTML elements.
more...
No comment yet.
Scoop.it!

Static Types are Overrated: Dynamic Duo – Loose Types and Object Extension

Static Types are Overrated: Dynamic Duo – Loose Types and Object Extension | JavaScript for Line of Business Applications | Scoop.it

Type correctness does not guarantee program correctness, but type annotations are still cool, and there are actually lots of great tools for analysis of JavaScript applications.

In this talk, you’ll learn how you can gain a lot more confidence in the correctness of your JavaScript applications, and probably a thing or two about why JavaScript’s dynamic types are actually a huge asset to application developers.

more...
No comment yet.
Scoop.it!

Learn how to make Data Visualizations with D3.js | DashingD3js.com

Learn how to make Data Visualizations with D3.js | DashingD3js.com | JavaScript for Line of Business Applications | Scoop.it
Welcome to DashingD3js.com - a website full of D3 Tutorials, D3 Screencasts and a D3 Newsletter.


* Why Data Visualizations
* Why build Data Visualizations with D3.js
* The Data Visualization Process
* Basic Building Blocks
* D3.js First Steps
* Adding a DOM element
* Adding an SVG element
* Binding Data to DOM Elements
* Using Data Bound to DOM Elements
* Creating SVG Elements Based on Data
* Using the SVG Coordinate Space
* Data Structures D3.js Accepts
* Using JSON to Simplify Code
* SVG Basic Shapes and D3.js
* SVG Paths and D3.js
* Dynamic SVG Coordinate Space
* D3.js Scales
* SVG Group Element and D3.js
* SVG Text Element
* D3.js Axes

Jan Hesse's insight:

for D3 with Angular see: https://www.dashingd3js.com/d3-resources/d3-and-angular

more...
No comment yet.
Scoop.it!

Enter the World of Node.js

Enter the World of Node.js | JavaScript for Line of Business Applications | Scoop.it

Everyone talks about Node.js these days, but you’re not quite sure what it is? Or, do you just want to impress your friends with some nerd knowledge? This article will take you on a quick ride through the world of Node.js!

As previously mentioned, Node ships with a collection of core modules. This section describes three commonly used core modules, but this section is by no means comprehensive.

If you want to use more than the core modules, there is no way around using Node’s Package Manager, or npm. npm installs third party modules from its registry which contains over 64,000 modules. 

more...
No comment yet.
Scoop.it!

Posts are paused for vacation

Posts are paused for vacation | JavaScript for Line of Business Applications | Scoop.it

Guys dont't cry. It's going to be a great sunny trip to Peru for a month. For your daily update consider:

more...
No comment yet.
Scoop.it!

EmberJS with a Separate Rails API

EmberJS with a Separate Rails API | JavaScript for Line of Business Applications | Scoop.it

We built our API and our JavaScript application as two completely separate applications. We had one repo that held a very basic Rails application with Ember on top and another repo that held the API built in Rails.

There are a lot of front end development tools that will allow you to build an EmberJS application using CoffeeScript, Sass and the other tools that we like to use on projects. After evaluating them we settled on using a basic Rails application instead; primarily for simplicity. The project had a short timeline and we didn't want to have to worry about another tool that we were not familiar with. In the future I would love to try building an Ember UI using a front end tool such as Tapas with Ember but we didn't have any complaints with using Rails in this case and it made our stack a bit simpler to use.

For Ember in our Rails app we used the ember-rails gem. It provides a basic folder structure for your Ember application inside the app/assets/javascripts directory. The directory structure is similar to a Rails application as you can see below...


more...
No comment yet.
Scoop.it!

LigerMobile Framework

LigerMobile Framework | JavaScript for Line of Business Applications | Scoop.it

LigerMobile is a lightweight open source framework that helps you develop hybrid apps quickly and easily. If you are looking for a tool to build a hybrid app, create a prototype, or just need a stepping stone to full native app development — this is a great way to begin.

more...
No comment yet.
Scoop.it!

How to employ test driven JavaScript using QUnit

How to employ test driven JavaScript using QUnit | JavaScript for Line of Business Applications | Scoop.it

Test driven development is now widely accepted as a JavaScript workflow, and it’s something we should all embrace because it saves us a great deal of time when coding.

In this article I’ll introduce you to QUnit, a testing framework that will help you spot errors and bugs in your code.

At first, this process may seem complex and tedious. Creating a test for all of your functions does take some time, but it will save you hours of debugging at the end of the project cycle.

Not only that, but you’ll save yourself the blushes we all get when a client emails us about a bug they’ve found.

As a further benefit, you’ll find that this workflow also benefits cross-browser testing, and using this approach you can test in several browsers straight out of the box.

more...
No comment yet.
Scoop.it!

vis.js | a dynamic, browser-based visualization library

vis.js | a dynamic, browser-based visualization library | JavaScript for Line of Business Applications | Scoop.it

Vis.js is a dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, and Graph.

more...
No comment yet.
Scoop.it!

Handling DOM events in Backbone.js and working with Collections

Handling DOM events in Backbone.js and working with Collections | JavaScript for Line of Business Applications | Scoop.it
The Backbone.js library allows you to develop responsive web applications with clear separation of Model and View. DOM Events associated with Collection helps to notify the UI elements about Updates and accordingly to display refreshed data

In Backbone, the View (UI) is generally rendered using HTML Templates, and elements declared in this Template are accessible to View, but it might be possible that the HTML page (or MVC view or .aspx) already contains HTML elements and you need to handle the DOM events for these elements. The question then is how to handle them? In the following implementation, we will see that the ‘click’ event for the html button element is handled inside the View object. The method which gets executed for the click event is used to add the model object into the collection and then the collection is rendered using HTML Table.

more...
No comment yet.
Scoop.it!

Using Firebase to sync data with a webpage

Using Firebase to sync data with a webpage | JavaScript for Line of Business Applications | Scoop.it

Firebase really seems to fix one of the pain points that I currently have in client-server development, which is how to send/synchronise data across multiple clients (including the server).

I first heard about Firebase from the Wire up a Backend example that can be found at http://angularjs.org, and today I was able to give it a test drive.

1) Creating an Firebase account

2) Firebase tour

3) Creating a simple Html/Javascript page to test it out

4) Setting and Pushing data

5) receiving events

5) Consuming and Sending events using REST API

6) Programatically add new items to the Chat window

6) What about XSS

more...
No comment yet.
Scoop.it!

Ember - Tricks | Code snippets repository for emberjs

Basically, the whole idea is to have a central location solely dedicated to sharing and finding quick code snippets for emberjs.


* Looping over an array in your template
* Linking to a route in your template
* Creating nested routes
* Creating a custom helper with momentjs
* Redirecting a route to another before it is loaded
* Boilerplate for creating a view

more...
No comment yet.
Scoop.it!

Single Page Application performing database CRUD operations using Backbone and ASP.NET WebAPI

Single Page Application performing database CRUD operations using Backbone and ASP.NET WebAPI | JavaScript for Line of Business Applications | Scoop.it

This tutorial is about creating a Single Page Application using Backbone and performing database CRUD (Create, Read, Update and Delete) operations using ASP.NET Web API as a RESTful service.

Contents list of this article:

  1. Short description of Single Page Application.
  2. Short description of Backbone.
  3. Short description of ASP.NET Web API.
  4. Sample Single Page Application using Backbone and Web API.
more...
No comment yet.
Scoop.it!

Twitter Streaming API with Node.js, Socket.io and ReactJS

Twitter Streaming API with Node.js, Socket.io and ReactJS | JavaScript for Line of Business Applications | Scoop.it

I have been working in a prototype using the Twitter Streaming API with Socket.io and ReactJS for the frontend, Node.js in the backend, cool stuff!

I used several articles as a reference, the one using the streaming API using socket.io(but AngularJS and ntwitter npm package), real-time django using node.js and socket.io or a modern python stack for a real time web application.

In the end as I said I used nodejs, the twit package and socket.io in the backend. With all these tools was incredibly easy to have something running fast.

And these are the different parts composing the example, the installation of the different tools is beyond the scope of this article just because I want to focus more in functionality and I don't want the article to be very long.

Anyway if you have a question/criticism here I am. :-)

Jan Hesse's insight:

More ReactJS Intro: http://javaguirre.net/2014/02/09/reactjs-by-example/

more...
No comment yet.
Scoop.it!

Interactive online course for learning Javascript.

Interactive online course for learning Javascript. | JavaScript for Line of Business Applications | Scoop.it

This book will teach you the basics of programming and Javascript. Whether you are an experienced programmer or not, this book is intended for everyone who wishes to learn the JavaScript programming language.

In this first chapter, we'll learn the basics of programming and the Javascript language.

more...
No comment yet.
Scoop.it!

angular-localize - A localization module for AngularJS

angular-localize - A localization module for AngularJS | JavaScript for Line of Business Applications | Scoop.it

By running grunt locales:build you can get a set of JavaScript locale files that can be used to help translate content.

The basic angular-localize directive is used by adding the localize attribute to a tag. The text in the element will be used as the translation key, but you can uselocalize="key" to specify the key instead, which is useful if the final content hasn’t yet been copy edited.

The localize directive also observes data-* attributes and passes them as objects to translation functions, so data can be inserted into text dynamically.

There’s also a localize service for translating text in your JavaScript code, and there’s even a localizeFactory for creating your own attribute-based localize directives.

more...
No comment yet.
Scoop.it!

How Scribblify Delivers a Cross-Platform GUI with Node.js and the Chromium Embedded Framework

How Scribblify Delivers a Cross-Platform GUI with Node.js and the Chromium Embedded Framework | JavaScript for Line of Business Applications | Scoop.it

The Scribblify drawing app with its 10-point touch capability and Google Chrome-based GUI took the grand prize in the Intel® App Innovation Contest 2013 using resources from the Intel® Developer Zone.

more...
No comment yet.
Scoop.it!

Patterns in Polymer: The Greatest Book Ever

Patterns in Polymer: The Greatest Book Ever | JavaScript for Line of Business Applications | Scoop.it

Reusable web components in glorious isolation

Polymer lets you create your own <HTML>tags in complete isolation from what the rest of the web page is doing. The result is rock-solid, reusable code that just works™. Learn how to get the most out of this exciting new platform.


As web application complexity spirals out of control, next generation browser features that cut through the craziness remain out of reach.
What if you could use next generation features today?


more...
Dan Harabagiu's comment, March 4, 5:07 AM
I did, partially and I think the idea is nice and useful. For me this was something new.
aelena's comment, March 4, 5:10 AM
thanks for commeting... just one more question, Was it something you think can be practical and feasible in a real live environment or is it more of an academic exercise?
Dan Harabagiu's comment, March 4, 5:11 AM
I think is feasible for CMS or portals, where you could include your own nice and shiny HTML 5 elements. without to much dependencies between them. Definitely is not only academic.
Scoop.it!

Rewriting A WebApp With ECMAScript 6

Rewriting A WebApp With ECMAScript 6 | JavaScript for Line of Business Applications | Scoop.it

Today it’s possible for us to author in ES6 and transpile our sources down to ES5 at build-time, regardless of whether we’re using GruntGulp or Broccoli. With projects like Ember and Angular looking to ES6 as part of their roadmaps too (Ember App Kit already supports ES6 modules!), now is a great time to learn how ES6 can be used in practice.

In this guide, we’ll re-write the well known TodoMVC application (implemented withBackbone.js) using ECMAScript 6 language semantics. The implementation is made possible using Google’s Traceur compiler and ES6-Module-Loader.

If you haven’t come across these tools before, Traceur is a JavaScript.next-to-JavaScript-of-today compiler that allows you to use features from the future today and the ES6 Module Loader dynamically loads ES6 modules in Node.js and current browsers. If you’re wondering whether Traceur is ready for production-level apps, Erik Arvidsson recently answered this on their mailing list.

more...
No comment yet.
Scoop.it!

Setting Up GitHub to work with Visual Studio 2013 Step-by-Step

Setting Up GitHub to work with Visual Studio 2013 Step-by-Step | JavaScript for Line of Business Applications | Scoop.it
This post will show you how to setup Visual Studio 2013 to work with Github
more...
No comment yet.