Pedro Esperança esperancaJS

Component Based Architecture Style Guide that Scales and Welcomes New Tech

This is a project structure style guide based on lessons learned from developing multiple FE projects using component based architecture and Redux style state management.

Who is it for ?

For anyone looking for ideas on how to structure their FE projects using frameworks such as Angular, React, Vue.js and Ember.js who already have some understanding of Redux or similar state management patterns.

That value:

1.Install

npm install @ngrx/core @ngrx/store --save

2.Create The State

Map Lists 🗺

This is a rough draft studying the idea of building a platform where anyone can create their own map listings in the likes of airbnb, foursquare, booking, trip advisor, etc..

Why ?

Existing map based location suggestion apps are broken.

And the biggest reason is user's divergent tastes.

Angular CLI - Lessons Learned

Why Angular 2 and angular CLI ?

The one difference we can all agree on between developing in Angular or in React is the level of predictability.

Jumping from an Angular project to another should be seamless if it follows the same principles described in the style guide.

And Angular CLI helps this level of predictability even further by giving us a standard and encapsulated way of managing our environments, generating new elements and keeping up to date with the best way of doing all this.

cities

https://laptopfriendly.co/cities.json

place list

https://laptopfriendly.co/.json, so for example, https://laptopfriendly.co/belgrade.json

place:

https://laptopfriendly.co//.json, example: https://laptopfriendly.co/lisbon/navegadoors.json

test

Jumping into ng2 with Angular CLI

by @esperancaJS

These are the steps followed during the talk in case you try to follow along or want to redo them at home

1. Install

Setup

Ensure you have Node 4.x in the global paths

Having node 4.x through NVM is not enough

If you are on linux or mac you can run:

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -


	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<link type="text/css" rel="stylesheet" href="http://mbostock.github.io/d3/talk/20111116/style.css"/>
	<style type="text/css">

	circle.node {
	cursor: pointer;

	{
	name: 'goncalo',
	age: '340',
	education: [
	{ name: 'IST', start: 'ha uns anos', end: 'daqi a outros anos', avg: '8' },
	{ name: 'escolinha', start: 'ha uns anos', end: 'ha uns anos', avg: '20' },
	],
	orientation: 'feg'
	}