REQUEST A DEMO

Tag: Javascript

Simplify Redux Actions with Middleware

December 14, 2015 Comparing Flux with Redux Working with React, we compared flux with redux, our team decided to use redux. The devtools redux offers was icing on the cake. Diving in, we wanted a central location for all of our API calls. The API middleware would need to handle dispatching a pre-request, successful request, and failures. To handle this, we set our actions in the following format Actions import DT_API_CALL from '../middleware/api'; const USER_REQUEST = 'USER_REQUEST'; const USER_SUCCESS = 'USER_SUCCESS'; export function fetchUser(userId) { return { [DT_API_CALL]: { types: [USER_REQUEST, USER_SUCCESS], endpoint: '/user/${userId}', method: 'get' } }; } export function saveUser(user) { return { [DT_API_CALL]: { types: [USER_REQUEST, USER_SUCCESS], endpoint: '/user/update', method: 'put', data: user } }; } Configure middleware Configuring our middleware looks something like: export default store => next => action => { const apiCall = action[DT_API_CALL]; if (typeof apiCall…

Pointfree Javascript

December 10, 2015 Pointfree Javascript In a recent post Functional Javascript, we talked about using functions to simplify our coding practice.  I would like to dig in a bit more and talk about pointfree.  Pointfree is a function that doesn't know what its data is.  For example: // Not Pointfree var initials = function (name) { return name.split(' ').map(R.compose(R.toUpper, R.head)).join('. '); }; //pointfree var initials = R.compose(R.join('. '), R.map(R.compose(R.toUpper, R.head)), R.split(' ')); Notice our first function takes in a parameter of name, because it knows its data it is not pointfree.  Our second function does the same as the first but doesn't know its data.  Therefore, it is pointfree.  For some, the second function is foreign and confusing and the first is something closer to what you might be used to seeing.  However, even the first could be confusing, what is compose, how…

Functional Javascript

javascript
December 3, 2015 Improving my own javascript style... Here at Dovetail, developers are encouraged to keep themselves current with today's coding practice.  Last year, I started studying functional coding to improve my javascript style, along with learning to write cleaner maintainable code.  The easiest way to explain is to take some code and we will begin to refactor it.  Here is a good example: function findUserByName(name, data) { for (var i=0; i<data.length; i++) { if (data[i].name === name) { return data[i]; } } return undefined; } function removeUserByName(name, data) { for (var i=0; i<data.length; i++) { if (data[i].name === name) { data.splice(i, 1); } } return data; } ... var users = [{name: 'John Doe'}, {name: 'Jane Doe'}, {name: 'Henry Smith'}]; findUserByName('John Doe', users); // returns {name: 'John Doe'} ... // Later in some code we want to remove the user removeUserByName('John Doe', users); Red…

Organizing your Angular App with Constants

June 27, 2014 Often times we find ourselves coding strings into our javascript that when seriously thought through, should have been constants. One good example I found in my own code was a factory that sends statistics down to our server. The factory was coded to take in a topic along with the action performed. This is all good, the issue was in the controllers sending the data into the factory. I found I was sending hard coded strings which didn't sit well with me. An example of this would look like: $scope.linkClickedStat = function(linkLocation) { statFactory.sendStat('LinkClicked', linkLocation); } The first part of the signature as you can see I am sending a hard coded string of LinkClicked. How can this be a problem later? Well, a couple of issues here. I could misspell this in another controller and our stats will be…