Virtual Madness @ Etsy

Virtual Madness @ Etsy
Nishan Subedi
nishan@etsy.com
@subedinishan

@subedinishan
#devtools
• Infrastructure team
• <iframe>JS</iframe>
• Tooling

Virtual Madness - Pre Marionette
@subedinishan

@subedinishan
jQuery days
(function (window, $) {
$(function() {
$("input.delete-host").change(function() {
var hostname = $(this).attr('data-hostname');
if ($(this).is(':checked')) {
$('#div-vm-' + hostname).addClass('selected');
$('input#delete_dns-' + hostname).prop('checked', true);
$('input#remove_disk-' + hostname).prop('checked', true);
$('input#remove_autostart-' + hostname).prop('checked', true);
} else {
$('#div-vm-' + hostname).removeClass('selected');
if (!$('input#delete_dns-' + hostname).attr('disabled')) {
$('input#delete_dns-' + hostname).prop('checked', false);
$('input#remove_disk-' + hostname).prop('checked', false);
$('input#remove_autostart-' + hostname).prop('checked', false);
}
}
});
});
!
})(window, jQuery);

@subedinishan
PHP for templating
<?php
include('templates/filters.php');
$extra_head = <<<HEAD
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
function drawVisualization() {
var guest_data = google.visualization.arrayToDataTable([
$format_virt_counts
]);
google.setOnLoadCallback(drawVisualization);
</script>
HEAD;
?>
<h2>Subnet Capacity</h2>
<?php foreach ($graph_data AS $host_name => $host_data) : ?>
<h3><a href="<?php echo $host_data['page_url']; ?>" target="blank"><?php echo $host_name ?></a></h3>
<?php if (!empty($host_data['graphs'])) : ?>
<ul class="host_graphs">
<?php foreach ($host_data['graphs'] AS $host_graph) : ?>
<li><?php echo $host_graph; ?></li>
<?php endforeach ?>
</ul>
<?php endif ?>
<script>
get_guest_graphs('<?php echo $host_name; ?>');

@subedinishan
PHP for templating
<?php
include('templates/filters.php');
$extra_head = <<<HEAD
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
function drawVisualization() {
var guest_data = google.visualization.arrayToDataTable([
$format_virt_counts
]);
google.setOnLoadCallback(drawVisualization);
</script>
HEAD;
?>
<h2>Subnet Capacity</h2>
<?php foreach ($graph_data AS $host_name => $host_data) : ?>
<h3><a href="<?php echo $host_data['page_url']; ?>" target="blank"><?php echo $host_name ?></a></h3>
<?php if (!empty($host_data['graphs'])) : ?>
<ul class="host_graphs">
<?php foreach ($host_data['graphs'] AS $host_graph) : ?>
<li><?php echo $host_graph; ?></li>
<?php endforeach ?>
</ul>

@subedinishan
Concerns
• We “understand” vanilla Javascript
• Method chain hell
• Yet another framework

If we can build it, so can
@subedinishan
you!

@subedinishan
Example - streamer
var VmsManager = new Marionette.Application({
onStart: function() {
// Start websocket connection
this.socket = io.connect('//'+ document.location.hostname +':8008', {
transports: ['websocket', 'xhr-polling'], secure: true
});
this.socket.on('logdata', _.bind(this.onServerLog, this));
},
onServerLog: function(data) {
this.logs.push(new this.Entities.Log(data));
},
onServerLogSubscribe: function(channel) {
this.socket.emit('subscribe', channel);
} navigate: function(route, options) {
options || (options = {});
Backbone.history.navigate(route, options);
},
hideStreamer: function() {
this.streamRegion.currentView.$el.hide();
},
showStreamer: function() {
this.streamRegion.currentView.$el.show();
}
});

@subedinishan
Example - FilteredCollection
this.filteredVms = VmsManager.Entities.FilteredCollection({
collection: options.collection,
filterFunction: function(filterCriterion) {
var criterion = filterCriterion.query.toLowerCase();
return function(vms) {
if(
vms.get("hostname").toLowerCase().indexOf(criterion) !== -1 &&
(vms.get("type") == filterCriterion.type || 'all' == filterCriterion.type)
) {
return vms;
}
};
}
});

@subedinishan
Example - message queue
var VmsManager = new Marionette.Application({
onStart: function() {
// Start a message queue
this.messageQueue = new this.Entities.Messages();
this.messageRegion.show(new this.VmsApp.Message.Messages({
collection: this.messageQueue
}));
onMessage: function(options) {
this.messageQueue.push(new this.Entities.Message(options));
},
});
!!
Entities.Message = Backbone.Model.extend({
defaults: {
type: 'info',
timeout: 2000,
isDismissible: true,
message: 'Nothing to see here'
}
});

@subedinishan
Message - view
Message.Message = Marionette.ItemView.extend({
template: 'message',
className: function() {
var val = ' alert col-md-12';
val += ' alert-' + this.model.get('type');
if (this.model.get('isDismissible')) {
val += ' alert-dismissible ';
}
return val;
},
onShow: function() {
if (this.model.get('timeout') !== 0) {
// Model not used after flash message display
// so, set up a timeout for cleanup
_.delay(_.bind(this.cleanup, this), this.model.get('timeout'));
}
},
cleanup: function() {
var timeout = this.model.get('timeout');
this.$el.fadeOut(timeout/2);
// We rely on the fadeOut successfully completing in timeout*2 time
_.delay(_.bind(this.model.destroy, this.model), timeout*2);
_.delay(_.bind(this.destroy, this), timeout*2);
}
});
Message.Messages = Marionette.CollectionView.extend({
childView: Message.Message
});

@subedinishan
Examples - DSL
Add.Vm = Marionette.ItemView.extend({
template: 'create',
className: 'panel panel-default alert col-md-12',
ui: {
create: ".js-create-vm",
size: "#size",
search: "#search",
base_role: "#base_role",
role_add: ".js-role-add",
primary: "#primary",
ldap: "#ldap",
},
bindings: {
'#ldap': 'ldap',
'#base_role': 'base_role',
'#version': 'version',
'#hostname': 'hostname',
'#search': 'search',
'#size': 'size',
'#virt': 'virt',
'#primary': 'primary',
},
events: {
"click @ui.create": "submitClicked",
"change @ui.size": "sizeChanged",
"click @ui.search": "searchClicked",
"change @ui.base_role": "baseRoleChanged",
"click @ui.role_add": "roleAdd",
"change @ui.ldap": "ldapChanged",
},
initialize: function() {
this.model.fetch({success: this.render});
this.stickit();
var fetchingVms = VmsManager.request("vms:entities");
$.when(fetchingVms).done(_.bind(this.entitiesFetched, this));

@subedinishan
Template loading
// Override Marionette template loading and compiling to use our template loader.
_.extend(Backbone.Marionette.TemplateCache.prototype, {
compileTemplate: function(template) {
return template;
},
!
loadTemplate: function(templateId) {
var contents = raw_template_cache[templateId];
return function(data) {
return Mustache.render(contents, data, function(name) {
return raw_template_cache[name];
});
};
}
});
!

@subedinishan
Template loading - PHP
class TemplateHelper extends HelperBase {
const DIRECTORY = "templates/";
const EXTENSION = ".mustache";
!
protected function get_template_names() {
return glob(self::DIRECTORY . '*' . self::EXTENSION);
}
!
protected function to_array() {
$return = [];
foreach ($this->get_template_names() as $template_name) {
$key = str_replace(self::EXTENSION, '', $template_name);
$key = str_replace(self::DIRECTORY, '', $key);
$return[$key] = file_get_contents($template_name);
}
return $return;
}
!
public function generate_template_javascript_variable() {
return '<script language="javascript" type="text/javascript"> var raw_template_cache = '
. json_encode($this->to_array()) . ' </script>';
}
}
!

@subedinishan
Template Loading - PHP
!
!
!
!
$app->get('/v2/.*?', function() use ($app) {
echo $app->helper('Template')->generate_template_javascript_variable();
$page_object = new WebBase();
echo $page_object->render('base');
});

@subedinishan
Modal - inside ItemView
this.confirmationModal = new BootstrapDialog({
title: 'Are you sure?',
message: 'Do you really want to delete ' + this.model.get('hostname') + '?',
type: BootstrapDialog.TYPE_DANGER,
buttons: [{
label: 'DELETE',
action: function(dialog){
parentScope.model.destroy({
success: function(model, response) {
VmsManager.Common.Notifier.success(response, {
fail: "VM deletion failed with response: " + response.message,
success: "Delete VM successful",
undef:"Delete VM came back with response" + JSON.stringify(response)
});
},
error: function(model, response) {
VmsManager.Common.Notifier.error(response, {
error: "VM Deletion failed with response: " + JSON.stringify(response)
});
}
});
dialog.close();
}
}],
onhidden: function() {
VmsManager.trigger('streamer:show');
VmsManager.trigger("vm:destroy");
VmsManager.trigger("log:subscribe", Etsy.data.username + "-delete");
}

Marionette JS
• active and helpful community
• great upgrade support
• adopted in the company
• plug and play - able to glue things together
• CollectionView
@subedinishan

@subedinishan
Future of Marionette @ Etsy
• Behaviors
• Skeletor - build once, use everywhere
• Migration
• Adoption

@subedinishan
What worked?
• Simplify implementation
• Simplify abstractions
• Leverage existing resources
• Create additional resources

@subedinishan
Get your learning on

@subedinishan
Questions?
!
We’re Hiring! etsy.com/careers

@subedinishan
References
https://avatars3.githubusercontent.com/u/1522517?v=3&s=460

Virtual Madness @ Etsy

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Virtual Madness @ Etsy

Ähnlich wie Virtual Madness @ Etsy (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (11)

Virtual Madness @ Etsy