f.strazzullo@extrategy.net
@TheStrazz86
https://github.com/francesco-strazzullo
https://medium.com/@TheStrazz86
https://slides.com/francescostrazzullo
angular.module("myApp").constant('alfabeto',
[
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r',
's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
]);
angular.module("myApp").controller('MyController', [
'$scope',
'alfabeto',
function(
$scope,
alfabeto) {
$scope.alfabeto = alfabeto;
}
]);angular.module("myApp").filter('nomeCompletoAnagrafica', [
function() {
return function(anagrafica) {
if(!anagrafica){
return "";
}
if(anagrafica.nomecompleto){
return anagrafica.nomecompleto;
}
if(!anagrafica.naturagiuridica){
return "";
}
return anagrafica.naturagiuridica.personafisica
? anagrafica.nome + " " + anagrafica.cognome
: anagrafica.denominazione;
};
}
]);<div>{{anagrafica | nomeCompletoAnagrafica}}</div><td>
<div class="Icon1" ng-if="obj.dato1 && !obj.dato2"></div>
<div class="Icon2" ng-if="!obj.dato1 && obj.dato2"></div>
<div class="Icon3" ng-if="obj.dato1 && obj.dato2"></div>
</td>angular.module("myApp").service('httpInterceptor',[
"$injector",
"$q"
function(
$injector,
$q) {
var skip = false;
var AUTHORIZATION_ERROR = [401, 403];
return {
getSkipErrors: function() {
return skip;
},
setSkipErrors: function(_skip) {
skip = _skip;
},
intercept: function(promise) {
return promise.then(function(successResponse) {
return successResponse;
}, function(errorResponse) {
var message = "";
if(skip){
return $q.reject(errorResponse);
}
if (_.contains(AUTHORIZATION_ERROR, errorResponse.status)) {
$injector.get('logout')();
}
return $q.reject(errorResponse);
});
}
};
}
]);angular.module("myApp", [])
.config(function ($httpProvider) {
$httpProvider
.responseInterceptors
.push(["httpInterceptor", function (httpInterceptor) {
return httpInterceptor.intercept;
}]);
});import {Motion, spring} from 'react-motion';
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
{value => <div>{value.x}</div>}
</Motion>...architectures should be driven by the underlying technical requirements of the system, rather than speculative planning for a future that may change.
Thoughtworks Technology Radar
State management refers to the management of the state of one or more user interface controls such as text fields, OK buttons, radio buttons, etc. in a graphical user interface.
Wikipedia
Redux is a predictable state container for JavaScript apps
Application Architecture For Building User Interfaces
The state of your whole application is stored in an object tree inside a single store.
The only way to mutate the state is to emit an action, an object describing what happened.
To specify how the state tree is transformed by actions, you write pure reducers.
var add = function(text) {
return {
actionType: "addTodo",
text: text
};
};function addTodo(state,text){
var toReturn = Object.assign({},state,{
todos:[...state.todos]
});
toReturn.todos.push(text);
return toReturn;
};
import { createStore } from 'redux';
import Reducers from 'src/Reducers';
let store = createStore(Reducers);How I learned the meaning of...
The Reactive Manifesto
Responsive, Resilient, Elastic, Message Driven
In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change.
Wikipedia
const triangle = {
base:2,
height:3,
color:'red',
get area() {
return (this.base * this.height) / 2
}
};
const report = () => {
console.log(triangle.area);
};
report();const triangle = triangleFactory({
base:2,
height:3,
color:'red'
});
const report = () => {
console.log(triangle.area);
};
triangle.addChangeListener(report);
triangle.setBase(4);By Traced by User:Stannered, created by en:User:TravisHein - en:Image:Proxy pattern diagram.png, CC BY-SA 3.0, Link
The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).
Mozilla Developer Network
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.
MobX docs
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.
const triangle = observable({
base:2,
height:3,
color:'red',
get area() {
return (this.base * this.height) / 2
}
});
const report = () => {
console.log(triangle.area);
};
autorun(report);
//report()
triangle.base = 4;
//no report()
triangle.color = 'blue';By Henning Schwentner - Own work, CC BY-SA 4.0, Link
organizations which design systems ... are constrained to produce designs which are copies of the communication structures of these organizations.
Melvin Conway
The 'Inverse Conway Maneuver' recommends evolving your team and organizational structure to promote your desired architecture. Ideally your technology architecture will display isomorphism with your business architecture.
ThoughtWorks technology radar
(Yet Another Time Tracking Application)
In systems engineering and requirements engineering, a non-functional requirement (NFR) is a requirement that specifies criteria that can be used to judge the operation of a system, rather than specific behaviors.
Wikipedia
Wikipedia
Graph By Martin Fowler
One of the hardest things to track during the life of a project is the motivation behind certain decisions
Michael Nygard
Lightweight Architecture Decision Records is a technique for capturing important architectural decisions along with their context and consequences.
ThoughtWorks technology radar
They are Simple instead of complicated, so they are easy to remember
There should be a limited number of principles, and they need to be considered as a whole
They don't give instructions on what to do, but they explain on what we need to focus when we make a decision
They are tailored to that group or project, so they are not transferable
Kai
Zen
a developer’s code calls library whereas the framework calls a developer’s code.
By Francesco Strazzullo
