Compare reusable components in react and angular in current projects

compare reusable components in react and angular in current projects

script

reusable components

Good Morning. (My name is Tim McKenna and) I am happy to be here. I am being considered for a front-end developer position. To be on one of the teams here would make me a part of a company whose products have shaped the world. That is a very cool. So thanks for having me. Most of the quotes are from A Pattern Language by Christopher Alexander. I carried around a dog eared copy for years and gave it to fellow carpenters. The ideas have been applied to Computer Science and been referenced in texts on Extreme Programming. I'll start with a little about my background and then a short case study. My talk is on reusable components. I have always been intrigued by repeatable patterns and reusable components. It started when I was building houses

construction -

I ran a construction company for twenty some years. For fourteen of those years I built new houses on vacant city lots for first time homeowners. Typically we would build a dozen houses at a time. There would be 25-30 or so constuction workers onsite each day. I worked on one of my carpentry crews and coordinated the subs.

construction toolkit

Some house styles were repeated on a project so I wanted to automate my systems and create tools that would streamline the process and create better buildings. I would start by creating a 3D wireframe from a set of architects plans...

software development

..and then I would write software. Here you see some AutoCad Lisp code that inserts floor joists into a 3D model. I could extract the vector data from the drawing and send it to a database to create stocklists and cut lists. Then I could print views of whatever we were building and hand them to the crew.

---

education and research

In 1998 I closed my business and went to college. I got a physics degree and then got funded to do graduate work. I worked mostly on memory and learning and pattern recognition and did a little work on audition.

research and software

We built models of how the brain worked, coded them in MatLab and then tried them out on big datasets. Here is a model in which sensory input is represented by a feature vector. We would feed this into neural network. This bit of code is using a feature vector to train the neural net. It is from a supervised learning model I worked on that gets trained up and then tries to recognize inputs it hasn't seen before. I loved working with MatLab. It was like an algorithm creation playground. The process was the product. And in the four years I used it, it kept getting better.

---

education and teaching

I got involved in this big NSF grant related to learning. We were tasked with updating the way we teach based on what we now know on how the brain works. I started to going into classrooms and I really liked it. I got job in a new Boston public high school where every student had a laptop.

software and teaching

There was no curriculum and there was no software and no servers. I joined a team writing a Humanities curriculum and spent Friday evenings with a group of teachers hacking together servers and hosting Moodles and forums and wikis and writing code. We adapted platforms for the classroom and leveraged what was already out there. Here is an example of a quick and dirty interface to a script that I used to inject content into student workspaces.

code scraping code

Here is a little script that takes a file of words and sends them to a dictionary website returning with a list of words with their definitions. I'd use that on the the class wiki, import it as a smartboard quiz or export it to the quizlet API. Peice by peice I was creating an environment and set of tools that would empower my students and allow them to collaborate.

consulting

After six years the laptops were old, the school closed down and the new school decided to reserve their macbooks for standardized test prep. So I went back to freelancing, and renovating the three decker where my kids were born. It had been 11 years since I had done anything on it so I had a lot of projects in the pipeline. I have been doing construction related consulting as well.

improving software skills

Meanwhile I decided to round out my software development skills. By this point I had taken an undergraduate degree's worth of computer science classes but I was intrigued by the rising power of the front-end and the idea of ReSTFUL API's and Agile and test-driven development.

---

case study on reusable components

Sorry, it was a bit of a long intro to my topic. Here is that quote again. I am intrigued by reusability and components on the front-end.

DEMO boggedbuses

Here is google.maps as an example of a component. I used it in a city of Boston hackathon on making the city work better. It uses the MBTA bus data feed to show where the buses are slowing down at different points during the day.

the limits of jQuery

I started out on the front-end with jQuery. The code you see is from this app.

DEMO hvac

Here is one zone of the heating system and here is that list of zones that is rendered. The HTML unordered list gives you no idea what's in that list. The items are rendered from a string deep in the code. jQuery sometimes muddies up the relationships and obscures the pattern. Andy asked me the other day how the program knew which zone it was operating on. I was like 'hold on just a sec'. It was a long second.

---

angularJS

Angular promised to solve the problems of jQuery spaghetti code. It has an active user community and lots of job listings. 2way data-binding was a big attraction of Angular.

code for 2way data binding

You click in the span in one page of the app it changes the default list, makes it active and automatically the list in another part of the app gets repopulated.

DEMO stuff2get

It's magic.

the direction of AngularJS

Cengage Learning hosts the Angular meetup. Programmers there are using directives to ecapsulate javascript and HTML into something that looks a lot like a web component. It can be styled and pick up the company-wide look and feel. Here are a couple of Angular directives that I reuse.

code sbOnline

There is code in this app that intercepts every HTTP response and sets a global variable. This is a directive that starts out by making an http call and then watches the online variable for changes.

DEMO online component

When the response status of an http call changes it re-renders. You can drop it in anywhere.

to components

Components combine the code that renders the with the code that runs them. It changes the way I think about organizing my code.

SKIPreusability on the back end

Here is a front end component connected to a backend server. The node/mongo backend module takes care of apikey token authentication. I can plug in additional functionality by requiring another module.

problems with angularJS

You can get into trouble if you don't do everything the angular way. It is possible to add a feature and break the 2way bindings. Every time you add a ng-value or ng-click you add another round to a cycle that resolves the bindings. Angular is undergoing a total rewrite and things like the new 2.0 router are missing their target dates.

---

ReactJS

In React you nest components in a hierarchy. React does not have 2way data binding and uses the idea of state and props.

code Yard state

Here is a top-level component. State is only changed here either by data coming in from the server or by messages sent from components. The state is sent down as props to the children components.

DEMO cascada

You have 3 components, pond, bridge and center. Each contains a button component.

code

spots to pond :the parent at the top of the page renders three components, sends data to each and relays messages onUserInput back down to the top-level component

DEMO2 cascada

The server has been changing the state react has re-rendered the button. When the timer is on the button is active, it moves, has shadows...when it is either on or off it acts as an icon. It's flat, you can't click it.

code button

Most of the button functionality is contained in the component code down here. The parameters that customize the button like its size or image or whether it is clickable come from the parent.

reusability compared

React and Angular components look similar. Angular components need to set up how they are isolating the scope of the parent. @ indicates 1 way data binding. and = there would indicate 2way data binding

reusable components

Here is that same quote again. This is the last slide. I think I'll just read it to you. You can create reusable components with either React or Angular. React is conceptually simpler. Ember has a great development team, is already out with a 2.0 release that renders very fast. They have learned from React. You can write code for any of them in ES6 and have it transpiled to ES5. New features of ES6 Object.observe and generators get you a lot of the power of frameworks. And finally I would include RxJs and Immutable.js in the mix. They also help make reusable components work well today.

do you have questions for me

Andy and Vidya Srinivasan

• How do different teams communicate?
• Do team members work on more that one project at a time?
• How does the process go for introducing adding a new feature?
• How does a team work to deliver quickly and respond to emerging requirements?
• How does a team keep in synch with company wide initaitives and common elements?

Gerhard

• \

resume overview

reusable components -motivation :gh school to es6

searching for a pattern language

"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-

"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."

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 software development

'Each pattern is connected to certain "larger" patterns which come above it in the language; and to certain "smaller" patterns which come below it in the language. The pattern helps to complete those larger patterns which are "above" it, and is itself completed by those smaller patterns which are "below" it.'

following the direction

from jQuery to spaghetti

I guess I am a following this direction. First Ajax and jQuery let me inject content into a webpage. Then the front-end became cool. HTML5 and and javascript became more powerful...But jQuery didn't solve everything:

jquery code sample/app

"the heart of the pattern—which describes the field of physical and social relationships which are required to solve the stated problem, in the stated context."

    <ul id="rooms" class="current" data-role="listview" data-inset="true" data-filter="false">
    </ul>

    disp : function(idx){
        var temp = this.arr[idx]['setpt'];
        var timel = this.arr[idx]['clock'];
        var timep = time2PM(timel);
        var idx = this.arr[idx]['idx'];
        newTite ='  <li  data-ti="'+idx+'" data-timl="'+timel+'" data-temp="'+temp+'"><a href=";" ><img src="img/icons/pencil.png" title="edit" height="20px" width="20px"/></a><span>'+timep+' </span><span>'+temp+' °</span></li>';
        $(this.ulsel).append(newTite);
        this.bindEdit($(this.lisel));       
    },

In fact sometimes jQuery muddied up the relationships, obfuscated the pattern. What you see here is the code that produces the items in http://hvac.sitebuilt.net. Just looking at the HTML you have no idea what is going on. You have to dive deep into the javascript to find the relationships. Here is the method on the object that creates the HTML to show this.

Angular JS

the Model View Controller pattern

the magic of two way data binding

I started with Angular since it had a lot of Buzz. Big Meetup groups and lots of MEAN job listings. I have done a little with KnockoutJS and I found with Angular I didn't have to concern myself with mapping from JSON to the DOM. It just did it for me As long as I followed the 'Angular Way' everything was fine.

angular 2way example code/app http://stuff2get.sitebuilt.net

the direction of angular

"Now we can summon our multiplication table in our templates by using

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

from controllers to directives

Cengage Learning hosts the Angular meetup. They are all excited about using directives to ecapsulate javascript and HTML into something that looks a lot like a web component. It can be styled and pick up the company-wide look and feel. And you can drop them in wherever you need them. here are a couple that I actually reuse.

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