JavaScript for Li...
Follow
Find
271.5K views | +678 today
 
Scoop.it!

Computed Property Macros in Ember.js

Computed Property Macros in Ember.js | JavaScript for Line of Business Applications | Scoop.it

By design, Handlebars templates don’t allow complex expressions. You are given an {{#if}} block helper, but it can only evaluate whether something is “truthy” (aka true, a non-empty string or array or other value that is notundefined or null.)

Ember gives you a great tool out of the box to do this easily called computed properties. I’ve written about them before, but in a nutshell they allow you to create a function that transforms one or more properties into another single property.

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
Beam to my Inbox:
Your new post is loading...
Your new post is loading...
Scoop.it!

Browserify All The Things

This talk is about how to use browserify to develop front-end modular code using Common.JS, and how those modules should be documented, designed, and released using an automated build system. In order to explain these concepts I'll walk you through a few of my own open-source creations, highlighting interesting points as we go along.

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

JavaScript Memory Management Masterclass

Efficient JavaScript webapps need to be fluid and fast. Any app with significant user interaction needs to consider how to effectively keep memory usage down because if too much is consumed, a page might be killed, forcing the user to reload it and cry in a corner.

Automatic garbage collection isn't a substitute for effective memory management, especially in large, long-running web apps. In this talk we'll walk through how to master the Chrome DevTools for effective memory management.

Learn how to tackle performance issues like memory leaks, frequent garbage collection pauses, and overall memory bloat that can really drag you down.

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

Browserify and Gulp with React

Browserify and Gulp with React | JavaScript for Line of Business Applications | Scoop.it

The JS world moves quickly, and nowadays, there’re some new kids around the block. Today, we’ll explore Browserify, Gulp, and React and see whether they’d sound suitable for our projects. You might have heard of them but not have had the time to check them out. So we’ll look at the advantages and disadvantages of using Browserify, using Gulp, using React. Because it certainly doesn’t hurt to know our options.

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

React JS and FLUX

React JS and FLUX | JavaScript for Line of Business Applications | Scoop.it

I am not going to take up your time explaining FLUX in details, that is already very well done on the Facebook flux site. What I want to tell you about is why you would want to consider the flux architecture with React JS as your tool to build an interface, and handle interaction and updates to that interface.

Its all about state
Just to be sure that we are on the same page, state can be explained as simple as a checkbox. When the checkbox is checked, the state is different than if it is unchecked. What you want to call these states does not matter. Maybe you call it checked:true or state:'on', it does not matter, what matters is the way this state is communicated to and from the interface.

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

Why We May Ditch AngularJS For React

Why We May Ditch AngularJS For React | JavaScript for Line of Business Applications | Scoop.it

AngularJS two way data-binding is at the same time a great strength and its Achilles heel. Dealing with complex and/or large collections of items can significantly slow down rendering. We started looking for a solution to this problem and stumbled upon things like Thierry Nicola's post about his use of React to improve AngularJS rendering time.

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

The jungle of mobile HTML5 development

The jungle of mobile HTML5 development | JavaScript for Line of Business Applications | Scoop.it

Developers are confused in the way of developing an HTML5 mobile app, so I hope this guide will help them.

Before starting to show you the different platforms, frameworks available, let me tell you that I don’t consider Titanium Mobile as an HTML5 solution. Read my previous article to understand why.

There are four known solutions (many new others are created, but are still in an early status) to create HTML5 mobile apps.

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

Dispatched and direct method calls in ECMAScript 5 and 6

Dispatched and direct method calls in ECMAScript 5 and 6 | JavaScript for Line of Business Applications | Scoop.it

There are two ways to call methods in JavaScript:

  • via dispatch, e.g. obj.someMethod(arg0, arg1)
  • directly, e.g. someFunc.call(thisValue, arg0, arg1)

This blog post explains how these two work and why you will rarely call methods directly in ECMAScript 6.

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

Debugging AngularJS Apps from the Console

Debugging AngularJS Apps from the Console | JavaScript for Line of Business Applications | Scoop.it

When building AngularJS apps, it can be challenging to access data and services hidden deep in our application through the Javascript console in Chrome, Firefox, and IE. Here are some simple tricks we can use to inspect and control a running Angular app through the browser Javascript console, making it easy to test, modify, and even program our Angular app in real-time:

1: Access Scopes
2: Inspect the Scope Tree
3: Grab any Services
4: Access controller for directive
5: Chrome Console Features
6: Conclusion

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

ng-course : AngularJS Deep Dive Course

ng-course : AngularJS Deep Dive Course | JavaScript for Line of Business Applications | Scoop.it
This course will teach you the AngularJS fundamentals and the internal. The course will cover directives, binding, filters, ngRepeat, testing, isolate scopes and much much more, with real-world examples. ng-course, the best course in israel.
more...
No comment yet.
Scoop.it!

Senna - A blazing-fast Single Page Application engine

Senna - A blazing-fast Single Page Application engine | JavaScript for Line of Business Applications | Scoop.it

In order to create a single page application with good perceived latency and good user experience, the SPA engine must handle the browser native behavior in many aspects, for instance:

SEO & Bookmarkability: Sharing or bookmarking a link should always display the same content. Sending a link to a friend should get them where we were. More than that, search engines are able to index that same content.

Hybrid rendering: Ajax + server-side rendering allows disable pushState at any time, allowing progressive enhancement. The way you render the server side doesn't matter, it can be simple HTML fragments or even template views.

State retention: Scrolling, reloading or navigating through the history of the page should get back to where it was.

UI feedback: When some content is requested, it indicates to the user that something is happening.

Pending navigations: Block UI rendering until data is loaded, then displays the content at once. It's important to give some UX feedback during loading.

Timeout detection: Timeout if the request takes too long to load or when navigate to a different link while another request is pending.

History navigation: By using History API you can manipulate the browser history, so you can use browser's back & forward buttons.

Cacheable screens: Once you load a certain surface this content is cached in memory and is retrieved later on without any additional request. This can speed up a lot your application.

Page resources management: Evaluate scripts and stylesheets from dynamic loaded resources. 

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

First Look: Getting Started with Facebook's ReactJS Library

First Look: Getting Started with Facebook's ReactJS Library | JavaScript for Line of Business Applications | Scoop.it

Let’s go back to our Component which is the main React’s object. You can create complicated Web interfaces by combining Components. Each one of them implements render() where the temporary DOM is created and this rendering can be hierarchic. This way the Components tree is created. Each block contains of its current state and is re-rendered after any change. Changes in parent’s component are also passed to children.

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

Polymer Features You May Have Missed

Polymer Features You May Have Missed | JavaScript for Line of Business Applications | Scoop.it

There's so much new ground to cover with Web Components and Polymer that oftentimes some of the smaller conveniences are overlooked. Here are some of the cool things Polymer can do (or does for you) that you might not have noticed.

* Built-In Element Methods

* Layout Attributes

* Auto-Binding Templates

* Attribute Reflection

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

Server Side Validations with Ember Data and DS.Errors

Server Side Validations with Ember Data and DS.Errors | JavaScript for Line of Business Applications | Scoop.it

Validation errors are an unfortunate fact of life that you will have to deal with in almost every non trivial application. Often you will want to do client-side validations, and for that I recommend having a look at Ember Validations.

However, client side validations can be complex to implement, and you will always need to do server side validations anyway, both because you can't trust anything done on the client side, and some validations like uniqueness can't be implemented correctly without the transactional semantics only available on the server side.

It's a lot easier to start out doing server-side only validations, and this post shows how to take advantage of Ember's built in error handling.

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

C3.js | D3-based reusable chart library

C3.js | D3-based reusable chart library | JavaScript for Line of Business Applications | Scoop.it

C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more.

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

Node, Grunt, Bower and Yeoman - A Modern web dev's Toolkit

Node, Grunt, Bower and Yeoman - A Modern web dev's Toolkit | JavaScript for Line of Business Applications | Scoop.it

This article aims at introducing you to some of the currently most popular tools when developing modern web applications with JavaScript. These are totally not new at all and have been around for a couple of years now. Still, I found many devs still don't use or know about them (as you might), wherefore this article tries to give you a quick, concise intro to get you started.

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

React’s diff algorithm

React’s diff algorithm | JavaScript for Line of Business Applications | Scoop.it

In this article I will present how the diff algorithm and rendering work in React so you can optimize your own apps.


At any point in time, you describe how you want your UI to look like. It is important to understand that the result of render is not an actual DOM node. Those are just lightweight JavaScript objects. We call them the virtual DOM.

React is going to use this representation to try to find the minimum number of steps to go from the previous render to the next.


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

Regular Expressions Tools & Resources for Developers

Regular Expressions Tools & Resources for Developers | JavaScript for Line of Business Applications | Scoop.it
In this article we have gathered some Best Regular Expressions Tools & Resources that would help you to easily learn and become master of it.
more...
No comment yet.
Scoop.it!

Advanced objects in JavaScript

Advanced objects in JavaScript | JavaScript for Line of Business Applications | Scoop.it

This posts looks beyond everyday usage of JavaScript’s objects. The fundamentals of JavaScripts objects are for the most part about as simple as using JSON notation. However, JavaScript also provides sophisticated tools to create objects in interesting and useful ways, many of which are now available in the latest versions of modern browsers.

Contents:

  • getters and setters
  • defineProperty
  • defineProperties
  • Object.create
  • sealing objects, freezing them and preventing extensibility
  • valueOf and toString
  • Symbol
  • Proxy
more...
No comment yet.
Scoop.it!

ReactJS | Flux: Actions and the Dispatcher

ReactJS | Flux: Actions and the Dispatcher | JavaScript for Line of Business Applications | Scoop.it

Where the Dispatcher Fits in the Flux Data Flow:
The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each store registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores.

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

AngularJS - Overcoming performance issues. Limits.

We will discuss about...

1. View watches / data bindings

2. What you see is what you show

3. The risk of polluting scopes

4. Core directives to avoid

5. Splitting the page

6. Miscellaneous

7. Limits

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

Uploading To S3 With AngularJS

Uploading To S3 With AngularJS | JavaScript for Line of Business Applications | Scoop.it
How to upload files directly to AWS using AngularJS and the AWS JS SDK
more...
No comment yet.
Scoop.it!

3 Simple Tips for Using UI-Router

3 Simple Tips for Using UI-Router | JavaScript for Line of Business Applications | Scoop.it

In the past we’ve gone over how to use the great UI-Router for creating AngularJS applications. It provides great flexibility and power when defining states and nested states in your application. Today we’ll be going over three features that UI-Router provides that you might find useful when building your own applications.

Before we take dive in, if you need a quick overview of UI-Router, take a look at our starter guide and an example of UI-Router in action in a multi-step form.

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

.jsx Type Checking with tcomb

.jsx Type Checking with tcomb | JavaScript for Line of Business Applications | Scoop.it

Write your React.js components with safety and easy debugging This library is a three days hack aiming to add a type checking layer to the awesome library react-bootstrap maintaining identical APIs. You opt-in during the prototyping (full debugging support) and then you opt-out in production with just one require change. Beware, checkings are very strict at the moment.

Jan Hesse's insight:

https://github.com/gcanti/tcomb

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

React.js and How Does It Fit In With Everything Else?

React.js and How Does It Fit In With Everything Else? | JavaScript for Line of Business Applications | Scoop.it

React does have an innovative architecture that can be used to build much more complex applications like the commenting system shown as the tutorial on the React site . The React core is a system for mapping a view hierarchy onto some sort of rendering back end and most often it targets the browser DOM. The React team has stated they are less concerned about the JavaScript reference implementation and instead focused on the architecture of React. In other words, they care about the alternative ideas they are putting out there for building client-side applications more than their specific implementation of them in React.js.


Contents:

  • Is React a template library?
  • Is React similar to Web Components?
  • Are the Virtual DOM and Shadow DOM the same?
  • Can React be used with other JavaScript MVC frameworks?
  • Who uses React?
  • Is React a premature optimization if you aren’t Facebook or Instagram?
  • Can I work with designers?
  • Will React hurt my search engine optimizations (SEO)?
  • Is React a framework for building applications or a library with one feature?
  • Are components a better way to build an application?
  • Can I build something complex with React?
more...
No comment yet.
Scoop.it!

Introduction to Ember.js

Ember is…

• A framework for creating ambitious web applications

• Built for productivity

• Opinionated

• Sometimes perceived as difficult to learn (Not to scale)


Core Concepts
• Models

• Routes

• Templates

• Views

• Controllers

• Components

more...
No comment yet.