Doubts in general by a java developer


#1

Hi my name is davidson, i am from brazil.

I’m graduated in computer science and i have been a java developer for the past 2 years. I am sorry about my english i really have to improve that.

Now i’m studying about client side applications, javascript and their frameworks.

About frameworks i will study ember and angular. By reading( and i read a lot of blogs and similar) i cant say which is the best, so i will build two applications and get my own opinion.

I´m starting with ember. I’m pretty noob with javascript too. Now im reading the book “Javascript the good parts” by david crockford, i saw his videos on youtube he sound like a pretty smart guy.

So now the doubts:

I created a panel component with a button which contains some actions in controller.

So the first doubt: What’s the main difference between components and views?

I really dont know if i’m doing things in the correct way

First i created a “father” controller which will contain the method to send a panel action to the specified controller action

   App.BasicArrayController = Ember.ArrayController.extend({

actions : {
	panelActions : function(action) {
		this.send(action)
	},
    },

});


 App.BasicObjectController = Ember.ObjectController.extend({

actions : {
	panelActions : function(action) {
		this.send(action);
	},

    },

 });

Next i created the controller which will extend the “father” and created a object which contains the name to display in panel and the name of action in controller

App.AlbumController = App.BasicObjectController.extend({

    arrayActions : [Em.Object.create({name: 'Edit'},{action:'edit'}),Em.Object.create({name: 'Delete'},{action:'delete'})],

  actions : {
	
		edit:function(){
			this.transitionToRoute('album.edit'); 
		},
		confirmDelete:function(){
			this.get('model').deleteRecord();
			this.get('model').save();
			this.transitionToRoute('albums');
		}
      }
 });

This is the correct way to extend a controller in ember?

Next i created the component template (.hbs) with bootstrap

 <div {{bind-attr class=bootStrapClass}}>
<div class="panel-heading">

	{{#if arrayActions}}
	<div style="margin-top: -1.3%" class="btn-group pull-right">
		<button type="button" class="btn btn-default dropdown-toggle"
			data-toggle="dropdown">
			Actions <span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			{{#each arrayActions}}
			<li><a href="#" {{action 'panelActions' this on='click'}}>{{name}}</a></li>
			{{/each}}
		</ul>
	</div>
	{{/if}}

	<h3 data-toggle="collapse" data-parent="#accordion" {{bind-attr
		href=hrefCollapseId}} {{action 'collapse' on='click'
		}} class="panel-title">
		<span {{bind-attr id=collapseId}}
			class="glyphicon glyphicon-collapse-up">{{title}} 
	</h3>
</div>
<div {{bind-attr id=customId}} class="panel-collapse collapse in">
	<div class="panel-body">{{yield}}</div>
</div>
   </div>
   <!-- Modal -->
  <div class="modal fade" {{bind-attr id=myModalId}} tabindex="-1"
   role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
			<button {{action 'cancelDelete'}} type="button" class="close"
				data-dismiss="modal">
				<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
			</button>
			<h4 class="modal-title" id="myModalLabel">Album</h4>
		</div>
		<div class="modal-body">Are you shure?</div>
		<div class="modal-footer">
			<button type="button"
				{{action 'cancelDelete'}} class="btn btn-default"
				data-dismiss="modal">Cancel</button>
			<button type="button"
				{{action 'confirmDelete' this}} class="btn btn-primary">Confirm</button>
		</div>
	</div>
     </div>
 </div>

Now the component .js

App.PanelPrimaryComponent = Ember.Component.extend({

 setupIds: function(){
        this.setProperties({ 
        	collapseId: "collapse" + this.get('customId'),
        	hrefCollapseId:"#" + this.get('customId'),
        	myModalId: "myModal" + this.get('customId')
        });
    }.on("init"),
actions : {
	panelActions : function(obj) {
		
		if(obj.action==="delete") this.send('delete');
		else
		 this.sendAction('panelActions',obj.action);
	},
	delete:function(){
		var jqueryModalId = "#"+ this.get('myModalId');
		$(jqueryModalId).modal('toggle')
	},
	cancelDelete:function(){
		this.set('deleteMode',false);				
	},
	confirmDelete:function(){
		$(".close").click();
		this.sendAction('panelActions','confirmDelete');
	},
	
	collapse:function(){
		var jQueryCollpaseId= "#"+this.get('collapseId');
		if($(jQueryCollpaseId).hasClass("glyphicon-collapse-down")){
			$(jQueryCollpaseId).removeClass("glyphicon-collapse-down").addClass("glyphicon-collapse-up")
		}
		else{
			$(jQueryCollpaseId).removeClass("glyphicon-collapse-up").addClass("glyphicon-collapse-down")
		}
	}
  }
});

Next a template which uses the component

<div class="col-xs-6">
{{#panel-primary title="Album" bootStrapClass="panel panel-success" customId="album" arrayActions=arrayActions panelActions='panelActions'}}
 <span class="label label-default">Name: </span> {{name}} <span
	class="label label-default">Description: </span> {{description}} {{/panel-primary}}
 </div>
{{outlet}}
  1. Since i can have multiple panels i have to bind a dynamic id(“collpase” and “modalId” , this is the correct way?
  2. This is the best way to send that kind of action to controller in a component?
  3. In general this is the best way to do that kind of component? What shold i do different in general?

The documentation in ember is good, but the examples are too simple in my opinion, but off course i can be wrong about that too… as i said i’m a noob in client side things.


#2

I first started of building a lot of things with components too, I then soon realized that components make a lot of things more complicate and most times it’s easier to just have a view. Components are used for special cases, but there is a nice discussion about when to use components here: http://stackoverflow.com/questions/18593424/views-vs-components-in-ember-js


#3

Like @Preexo, I also started out using components to organize my applications, but it starts goofing up your architecture pretty quickly. As a rule, components are reusable outside your application, views are reusable within your application. Components might be things like:

  • Datepicker
  • File uploader
  • Image carousel

Views generally handle primitive events, do DOM manipulation, and are aware of your application logic, like:

  • Click to upvote
  • Swipe to navigate
  • jQuery plugin initialization

A component is a view, so it’s possible to use one in place of another for a lot of tasks, but getting a feel for which object goes with which use case is big step in growing as an Ember developer.