Compare reusable components in react and angular in current projects

From Wiki2
Revision as of 15:13, 1 November 2015 by Tim (talk | contribs)

compare reusable components in react and angular in current projects

resume overview

reusable components -motivation -

from construction to high school to es6
searching for a pattern language
"You can use [a pattern language] to work with your neighbors, to improve your town and neighborhood. You can use it to design a house ... and you can use it to guide you in the actual process of construction."
"The elements of this language are entities called patterns. Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice"

background overview

construction

first time homeowner urban infill.
the game -connect with a developer, show up at community meetings, provide cost (from prior accurate unit cost data with current prices) feedback on designs, win the bid pg:x-
"to work with your neighbors, to improve your town and neighborhood"

construction and software

automation, reusabilty
productivity and ease of use

research

Boston University - Dept of Cognitive and Neural Systems - models of cognition
computer vision, audition, movement memory and learning
I worked mostly on memory and learning and little bit on vision. In our models a sensory input would be represented by a feature vector. Typically these vectors got fed into a neural network where they mapped to stored memories. Recognition or learning depended on the network of neural connections and the weighting or strength of those connections. Learning modified them. Recognition found a match.

research and software

modeling hard problems, implementing models in matlab
big data
little reusability
why mathworks answer - productivity and quality

education and teaching

National Science Foundation grant - BU, MIT and Brandies Center of Excellence for Learning in Education, Science and Technology A National Science Foundation Science of Learning Center
from MCAS mathematics to Humanities teacher

software and teaching

learning to code by reading code
accessing through a clear api
file:///C:/Users/tim/OneDrive/pathboston/code/hosted/assess/WikiBot/addPages2Users.html
C:\Users\tim\OneDrive\pathboston\code\hosted\assess\WikiBot\addPages2Users.php

consulting

renewable energy, and ecological building
creating spaces
hvac design and optimization
property management - I had left the building I was responsible for in reasonable shape. But after 10 years of having my time completely absorbed, I had a lot to do.
The pattern of my life for the last 5 years has been moving between construction consulting and developing a more formal set of software development skills

software development skills

coursework
portfolio development -deployed applications
technology choices
front end vs full stack

case study on reusability

reusability is the direction of front-end development

a pattern language quote
jquery spaghetti
following the direction

jquery code sample/app

angular

the ModelViewController pattern
the magic of two way data binding

angular 2way example code/app

the direction of angular

from controllers to directives
"Now we can summon our multiplication table in our templates by using <div multiplication-table instead of having to use ng-controller.

This is nice and glamorous, but we're still not any further into improving the quality of our code. We've just swapped one controller container for another and the HTML code is still out of whack." https://www.airpair.com/angularjs/posts/component-based-angularjs-directives

directive code sample - authentication

reusability on the back end

problems with angular

ng-everything or else
digest cycle
total rewrite

react

states and props
the flow of data
imutability
rxjs

react state code example

react immutability example - props code example

react components

custom buttons
component hierarchies

react component hierarchy

angular component hierarchy -isonline

a custom button

a reusable button

react and angular compare

failing to implement

the core concepts

imutability
rxjs
observer pattern
functional programming

conclusions

Angular and react represent the move toward

take away