As a software consultant, I get to see a lot of interesting code. In this particular instance a client was in the process of transforming their web application to a rich, interactive interface with the help of another company.
The project kicked off using Backbone and things were great. Until they were not great. Pages starting getting more and more involved and blame started being thrown at the technology choice.
A move to Ember.js ensued and the app was rewritten. But architecturally bad decisions don't hide long, and soon the rewrite was preforming even worse. That's when I stepped in, with the help of another consultant, to solve the performance issues once and for all. Our solution used Backbone.js and it was fast. This is that journey.
Javascript Frameworks for Well Architected, Immersive Web Appsdnelson-cs
Immersive web applications involve sophisticated interactivity within the browser, connected to models and data persistence on the server. The structure of the application is clearly delimited between client-side and server-side, but the available tools for building web applications have often blurred this distinction. The result is applications that are difficult to design and maintain.
This presentation is an effort to combine all the cool features present in Angular and provide a basic idea about how it would help a developer overcome some of the common issues faced in client side development.
What is AngularJS
AngularJS main components
View / Controller / Module / Scope
Scope Inheritance.
Two way data binding
$watch / $digest / $apply
Dirty Checking
DI - Dependence Injection
$provider vs $factory vs $service
In a world of emerging JavaScript, is Rails getting left behind? Are server-side MVC applications out and static single page applications in? In this talk I’ll describe how we’ve used webpack(er) and Vue to revitalize our JavaScript approach within an aging Rails application. You can have it both ways.
Presented at 3|SHARE's EVOLVE'14 - The Adobe Experience Manager Community Summit on Tuesday November 18th, 2014 at the Hard Rock Hotel in San Diego, CA. evolve14.com
AngularJS is a popular JavaScript framework. It is intended to make the implementation of RIA (Rich Internet Applications) easier and convenient. AngularJS is created and maintained by Google. It is relatively, a new JavaScript framework, which is designed to make the front-end development as simple as possible. AngularJS is a useful tool for standardizing the web application structure and it provides a future template to ensure that the client-side applications are developed much effectively.
This document by RapidValue is written by Gourav Ajmani, Technical Lead, who has been working on AngularJS for a while, and has read many tutorials and blogs on it. According to Gourav, he could never find any article which gives a clear, concise and step-by-step guide to create the project structure and execute the project. So, he has written this document which will help you to create the Project structure and then execute it in a simple manner.
Javascript Frameworks for Well Architected, Immersive Web Appsdnelson-cs
Immersive web applications involve sophisticated interactivity within the browser, connected to models and data persistence on the server. The structure of the application is clearly delimited between client-side and server-side, but the available tools for building web applications have often blurred this distinction. The result is applications that are difficult to design and maintain.
This presentation is an effort to combine all the cool features present in Angular and provide a basic idea about how it would help a developer overcome some of the common issues faced in client side development.
What is AngularJS
AngularJS main components
View / Controller / Module / Scope
Scope Inheritance.
Two way data binding
$watch / $digest / $apply
Dirty Checking
DI - Dependence Injection
$provider vs $factory vs $service
In a world of emerging JavaScript, is Rails getting left behind? Are server-side MVC applications out and static single page applications in? In this talk I’ll describe how we’ve used webpack(er) and Vue to revitalize our JavaScript approach within an aging Rails application. You can have it both ways.
Presented at 3|SHARE's EVOLVE'14 - The Adobe Experience Manager Community Summit on Tuesday November 18th, 2014 at the Hard Rock Hotel in San Diego, CA. evolve14.com
AngularJS is a popular JavaScript framework. It is intended to make the implementation of RIA (Rich Internet Applications) easier and convenient. AngularJS is created and maintained by Google. It is relatively, a new JavaScript framework, which is designed to make the front-end development as simple as possible. AngularJS is a useful tool for standardizing the web application structure and it provides a future template to ensure that the client-side applications are developed much effectively.
This document by RapidValue is written by Gourav Ajmani, Technical Lead, who has been working on AngularJS for a while, and has read many tutorials and blogs on it. According to Gourav, he could never find any article which gives a clear, concise and step-by-step guide to create the project structure and execute the project. So, he has written this document which will help you to create the Project structure and then execute it in a simple manner.
In The Trenches With Tomster, Upgrading Ember.js & Ember DataStacy London
A few months after I started working with Ember.js & Ember Data at my new job we began a project to upgrade both. There were parts that were a breeze and others that were quite tricky. This talk walks you through some of the challenges we faced and how we solved them as well as how we began to prepare for the Ember 2.x architectural shift. Hopefully this talk will help save you some time when you decide to upgrade your Ember web application.
Refactoring Large Web Applications with Backbone.jsStacy London
Have you ever starting working on a large, existing web application and jQuery spaghetti-code is all over the place? Your mind swirls as you try to figure out what code belongs to what component on what page. There are no JavaScript unit tests and you're terrified of making a change and breaking everything? I'm going to talk through the real life story of how Backbone.js helped to bring organization/structure, modularity, and testability to a large multi-page web application.
Discover why unit testing is such an important practice in software development and learn about Test Driven Development, mocking and other code testing practices in .Net
Version 6 of Adobe Experience Manager (AEM 6) is a major release that introduces significant innovations. Sightly is a new template system to be used in place of (or together with) JSP. Along with Sling Models, SIghtly strongly improves the separation between the logic and presentation. The development effort is reduced because a Sightly template is an HTML 5 document, easily maintainable even by front-end developers.
The presentation provides an overview of the basic features of Sightly and introduces the fundamentals of the new development model with the support of tools released release together with AEM 6.
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
This was a course given in Bangalore India for JSChannel conf 2013. It encompases the use of angular js and d3 in a harmonious way and gives an overview over each of the frameworks / libraries.
In The Trenches With Tomster, Upgrading Ember.js & Ember DataStacy London
A few months after I started working with Ember.js & Ember Data at my new job we began a project to upgrade both. There were parts that were a breeze and others that were quite tricky. This talk walks you through some of the challenges we faced and how we solved them as well as how we began to prepare for the Ember 2.x architectural shift. Hopefully this talk will help save you some time when you decide to upgrade your Ember web application.
Refactoring Large Web Applications with Backbone.jsStacy London
Have you ever starting working on a large, existing web application and jQuery spaghetti-code is all over the place? Your mind swirls as you try to figure out what code belongs to what component on what page. There are no JavaScript unit tests and you're terrified of making a change and breaking everything? I'm going to talk through the real life story of how Backbone.js helped to bring organization/structure, modularity, and testability to a large multi-page web application.
Discover why unit testing is such an important practice in software development and learn about Test Driven Development, mocking and other code testing practices in .Net
Version 6 of Adobe Experience Manager (AEM 6) is a major release that introduces significant innovations. Sightly is a new template system to be used in place of (or together with) JSP. Along with Sling Models, SIghtly strongly improves the separation between the logic and presentation. The development effort is reduced because a Sightly template is an HTML 5 document, easily maintainable even by front-end developers.
The presentation provides an overview of the basic features of Sightly and introduces the fundamentals of the new development model with the support of tools released release together with AEM 6.
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
This was a course given in Bangalore India for JSChannel conf 2013. It encompases the use of angular js and d3 in a harmonious way and gives an overview over each of the frameworks / libraries.
Presented at the 2014 Cow Town Code Camp in Ft. Worth, TX - http://CowTownCodeCamp.com - Blog Post: http://developingux.com/2014/07/23/modern-web-development/
The world is moving towards ASP.NET MVC.. but what about your legacy WebForms development. What are the things you can do today to make your WebForms more testable, reliable and even increase the SEO and usability of your WebForms.
This talk will walk through applying the Model View Presenter pattern to your ASP.NET WebForm applications and introduce you to some additional enhancements that Microsoft has made to WebForms recently to make your site and life that much better!
These are the presentation slides demonstratingseven versions of the UI of same HTML5 application using various libraries and frameworks. This application is described in detail in the O'Reilly book "Enterprise Web Development"
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
Lecture on CodeIgniter, # OSS Essential Training Program at Chittagong University of Engineering Technology, February 2008, http://bdosdn.org/wsatcuet.php
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Anthony Dahanne
Les Buildpacks existent depuis plus de 10 ans ! D’abord, ils étaient utilisés pour détecter et construire une application avant de la déployer sur certains PaaS. Ensuite, nous avons pu créer des images Docker (OCI) avec leur dernière génération, les Cloud Native Buildpacks (CNCF en incubation). Sont-ils une bonne alternative au Dockerfile ? Que sont les buildpacks Paketo ? Quelles communautés les soutiennent et comment ?
Venez le découvrir lors de cette session ignite
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
Understanding Globus Data Transfers with NetSageGlobus
NetSage is an open privacy-aware network measurement, analysis, and visualization service designed to help end-users visualize and reason about large data transfers. NetSage traditionally has used a combination of passive measurements, including SNMP and flow data, as well as active measurements, mainly perfSONAR, to provide longitudinal network performance data visualization. It has been deployed by dozens of networks world wide, and is supported domestically by the Engagement and Performance Operations Center (EPOC), NSF #2328479. We have recently expanded the NetSage data sources to include logs for Globus data transfers, following the same privacy-preserving approach as for Flow data. Using the logs for the Texas Advanced Computing Center (TACC) as an example, this talk will walk through several different example use cases that NetSage can answer, including: Who is using Globus to share data with my institution, and what kind of performance are they able to achieve? How many transfers has Globus supported for us? Which sites are we sharing the most data with, and how is that changing over time? How is my site using Globus to move data internally, and what kind of performance do we see for those transfers? What percentage of data transfers at my institution used Globus, and how did the overall data transfer performance compare to the Globus users?
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisGlobus
JASMIN is the UK’s high-performance data analysis platform for environmental science, operated by STFC on behalf of the UK Natural Environment Research Council (NERC). In addition to its role in hosting the CEDA Archive (NERC’s long-term repository for climate, atmospheric science & Earth observation data in the UK), JASMIN provides a collaborative platform to a community of around 2,000 scientists in the UK and beyond, providing nearly 400 environmental science projects with working space, compute resources and tools to facilitate their work. High-performance data transfer into and out of JASMIN has always been a key feature, with many scientists bringing model outputs from supercomputers elsewhere in the UK, to analyse against observational or other model data in the CEDA Archive. A growing number of JASMIN users are now realising the benefits of using the Globus service to provide reliable and efficient data movement and other tasks in this and other contexts. Further use cases involve long-distance (intercontinental) transfers to and from JASMIN, and collecting results from a mobile atmospheric radar system, pushing data to JASMIN via a lightweight Globus deployment. We provide details of how Globus fits into our current infrastructure, our experience of the recent migration to GCSv5.4, and of our interest in developing use of the wider ecosystem of Globus services for the benefit of our user community.
Developing Distributed High-performance Computing Capabilities of an Open Sci...Globus
COVID-19 had an unprecedented impact on scientific collaboration. The pandemic and its broad response from the scientific community has forged new relationships among public health practitioners, mathematical modelers, and scientific computing specialists, while revealing critical gaps in exploiting advanced computing systems to support urgent decision making. Informed by our team’s work in applying high-performance computing in support of public health decision makers during the COVID-19 pandemic, we present how Globus technologies are enabling the development of an open science platform for robust epidemic analysis, with the goal of collaborative, secure, distributed, on-demand, and fast time-to-solution analyses to support public health.
Multiple Your Crypto Portfolio with the Innovative Features of Advanced Crypt...Hivelance Technology
Cryptocurrency trading bots are computer programs designed to automate buying, selling, and managing cryptocurrency transactions. These bots utilize advanced algorithms and machine learning techniques to analyze market data, identify trading opportunities, and execute trades on behalf of their users. By automating the decision-making process, crypto trading bots can react to market changes faster than human traders
Hivelance, a leading provider of cryptocurrency trading bot development services, stands out as the premier choice for crypto traders and developers. Hivelance boasts a team of seasoned cryptocurrency experts and software engineers who deeply understand the crypto market and the latest trends in automated trading, Hivelance leverages the latest technologies and tools in the industry, including advanced AI and machine learning algorithms, to create highly efficient and adaptable crypto trading bots
top nidhi software solution freedownloadvrstrong314
This presentation emphasizes the importance of data security and legal compliance for Nidhi companies in India. It highlights how online Nidhi software solutions, like Vector Nidhi Software, offer advanced features tailored to these needs. Key aspects include encryption, access controls, and audit trails to ensure data security. The software complies with regulatory guidelines from the MCA and RBI and adheres to Nidhi Rules, 2014. With customizable, user-friendly interfaces and real-time features, these Nidhi software solutions enhance efficiency, support growth, and provide exceptional member services. The presentation concludes with contact information for further inquiries.
Globus Connect Server Deep Dive - GlobusWorld 2024Globus
We explore the Globus Connect Server (GCS) architecture and experiment with advanced configuration options and use cases. This content is targeted at system administrators who are familiar with GCS and currently operate—or are planning to operate—broader deployments at their institution.
Software Engineering, Software Consulting, Tech Lead.
Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Security,
Spring Transaction, Spring MVC,
Log4j, REST/SOAP WEB-SERVICES.
Why React Native as a Strategic Advantage for Startup Innovation.pdfayushiqss
Do you know that React Native is being increasingly adopted by startups as well as big companies in the mobile app development industry? Big names like Facebook, Instagram, and Pinterest have already integrated this robust open-source framework.
In fact, according to a report by Statista, the number of React Native developers has been steadily increasing over the years, reaching an estimated 1.9 million by the end of 2024. This means that the demand for this framework in the job market has been growing making it a valuable skill.
But what makes React Native so popular for mobile application development? It offers excellent cross-platform capabilities among other benefits. This way, with React Native, developers can write code once and run it on both iOS and Android devices thus saving time and resources leading to shorter development cycles hence faster time-to-market for your app.
Let’s take the example of a startup, which wanted to release their app on both iOS and Android at once. Through the use of React Native they managed to create an app and bring it into the market within a very short period. This helped them gain an advantage over their competitors because they had access to a large user base who were able to generate revenue quickly for them.
Designing for Privacy in Amazon Web ServicesKrzysztofKkol1
Data privacy is one of the most critical issues that businesses face. This presentation shares insights on the principles and best practices for ensuring the resilience and security of your workload.
Drawing on a real-life project from the HR industry, the various challenges will be demonstrated: data protection, self-healing, business continuity, security, and transparency of data processing. This systematized approach allowed to create a secure AWS cloud infrastructure that not only met strict compliance rules but also exceeded the client's expectations.
Unleash Unlimited Potential with One-Time Purchase
BoxLang is more than just a language; it's a community. By choosing a Visionary License, you're not just investing in your success, you're actively contributing to the ongoing development and support of BoxLang.
Advanced Flow Concepts Every Developer Should KnowPeter Caitens
Tim Combridge from Sensible Giraffe and Salesforce Ben presents some important tips that all developers should know when dealing with Flows in Salesforce.
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Globus
The U.S. Geological Survey (USGS) has made substantial investments in meeting evolving scientific, technical, and policy driven demands on storing, managing, and delivering data. As these demands continue to grow in complexity and scale, the USGS must continue to explore innovative solutions to improve its management, curation, sharing, delivering, and preservation approaches for large-scale research data. Supporting these needs, the USGS has partnered with the University of Chicago-Globus to research and develop advanced repository components and workflows leveraging its current investment in Globus. The primary outcome of this partnership includes the development of a prototype enterprise repository, driven by USGS Data Release requirements, through exploration and implementation of the entire suite of the Globus platform offerings, including Globus Flow, Globus Auth, Globus Transfer, and Globus Search. This presentation will provide insights into this research partnership, introduce the unique requirements and challenges being addressed and provide relevant project progress.
Accelerate Enterprise Software Engineering with PlatformlessWSO2
Key takeaways:
Challenges of building platforms and the benefits of platformless.
Key principles of platformless, including API-first, cloud-native middleware, platform engineering, and developer experience.
How Choreo enables the platformless experience.
How key concepts like application architecture, domain-driven design, zero trust, and cell-based architecture are inherently a part of Choreo.
Demo of an end-to-end app built and deployed on Choreo.
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
9. Widget Dashboard
• single page Javascript app, built in Backbone
• pulls data from API server
• more and more features caused code bloat
• Widget Factory does not know much Javascript
10. Widget Dashboard
• single page Javascript app, built in Backbone
• pulls data from API server
• more and more features caused code bloat
• Widget Factory does not know much Javascript
11. Backbone.js gives structure to web applications by
providing models with key-value binding and
custom events, collections with a rich API of
enumerable functions, views with declarative event
handling, and connects it all to your existing API
over a RESTful JSON interface.
12. Backbone.js gives structure to web applications by
providing models with key-value binding and
custom events, collections with a rich API of
enumerable functions, views with declarative event
handling, and connects it all to your existing API
over a RESTful JSON interface.
13. Backbone.js gives structure to web applications by
providing models with key-value binding and
custom events, collections with a rich API of
enumerable functions, views with declarative event
handling, and connects it all to your existing API
over a RESTful JSON interface.
14. Backbone.js gives structure to web applications by
providing models with key-value binding and
custom events, collections with a rich API of
enumerable functions, views with declarative event
handling, and connects it all to your existing API
over a RESTful JSON interface.
15. Backbone.js gives structure to web applications by
providing models with key-value binding and
custom events, collections with a rich API of
enumerable functions, views with declarative event
handling, and connects it all to your existing API
over a RESTful JSON interface.
16. Backbone.js gives structure to web applications by
providing models with key-value binding and
custom events, collections with a rich API of
enumerable functions, views with declarative event
handling, and connects it all to your existing API
over a RESTful JSON interface.
17. var MyView = Backbone.View.extend({
el: '#content',
template: _.template($('#template').text()),
render: function() {
this.$el.html(this.template({
language: 'Backbone'
}));
return this;
}
});
var myView = new MyView();
myView.render();
<div id="content"></div>
<script id="template" type="text/template">
<h1>Hello from <%- language %>!</h1>
</script>
http://codepen.io/coffeeandcode/pen/VYmZjK
19. : Issues
• library does not do much, never will
• easy to start integration, difficult things around
edges
• lack of project architecture leaves a lot up to the
developers
• easy to create memory leaks
20. Widget Dashboard 2.0
• app rewritten in Ember.js
• goal was to write less code, easier to teach
• less moving parts == less to screw up
• Widget Factory still does not know much JS
21. Widget Dashboard 2.0
• app rewritten in Ember.js
• goal was to write less code, easier to teach
• less moving parts == less to screw up
• Widget Factory still does not know much JS
25. Ember.js is an open-source client-side JavaScript web
application framework based on the model-view-
controller (MVC) software architectural pattern. It allows
developers to create scalable single-page applications
by incorporating common idioms and best practices into
a framework that provides a rich object model,
declarative two-way data binding, computed properties,
automatically-updating templates powered by
Handlebars.js, and a router for managing application
state.[1]
1. http://en.wikipedia.org/wiki/Ember.js
26. Ember.js is an open-source client-side JavaScript web
application framework based on the model-view-
controller (MVC) software architectural pattern. It allows
developers to create scalable single-page applications
by incorporating common idioms and best practices into
a framework that provides a rich object model,
declarative two-way data binding, computed properties,
automatically-updating templates powered by
Handlebars.js, and a router for managing application
state.[1]
1. http://en.wikipedia.org/wiki/Ember.js
27. Ember.js is an open-source client-side JavaScript web
application framework based on the model-view-
controller (MVC) software architectural pattern. It allows
developers to create scalable single-page applications
by incorporating common idioms and best practices into
a framework that provides a rich object model,
declarative two-way data binding, computed properties,
automatically-updating templates powered by
Handlebars.js, and a router for managing application
state.[1]
1. http://en.wikipedia.org/wiki/Ember.js
28. Ember.js is an open-source client-side JavaScript web
application framework based on the model-view-
controller (MVC) software architectural pattern. It allows
developers to create scalable single-page applications
by incorporating common idioms and best practices into
a framework that provides a rich object model,
declarative two-way data binding, computed properties,
automatically-updating templates powered by
Handlebars.js, and a router for managing application
state.[1]
1. http://en.wikipedia.org/wiki/Ember.js
29. Ember.js is an open-source client-side JavaScript web
application framework based on the model-view-
controller (MVC) software architectural pattern. It allows
developers to create scalable single-page applications
by incorporating common idioms and best practices into
a framework that provides a rich object model,
declarative two-way data binding, computed properties,
automatically-updating templates powered by
Handlebars.js, and a router for managing application
state.[1]
1. http://en.wikipedia.org/wiki/Ember.js
30. Ember.js is an open-source client-side JavaScript web
application framework based on the model-view-
controller (MVC) software architectural pattern. It allows
developers to create scalable single-page applications
by incorporating common idioms and best practices into
a framework that provides a rich object model,
declarative two-way data binding, computed properties,
automatically-updating templates powered by
Handlebars.js, and a router for managing application
state.[1]
1. http://en.wikipedia.org/wiki/Ember.js
33. : Issues
• very opinionated, very large codebase
• does black magic with Handlebars
• assumes you need the big guns
• two-way data binding by default
• easy to shoot yourself in the foot
42. People Problem
• lack of knowledge in front-end technologies
• not enough pairing and information sharing
• team skill level was not adequate to pick up where
Vendor Co. left off
• amount of documentation was lacking
43. Our Solution
• focus on knowledge sharing
• pair programming / technical side projects
• build what the client understands
• built JS workflow with the client’s help
• explicit code, no magic
• uses CommonJS and Browserify
• use technologies with little change and a wealth of
documentation
45. Backbone.Marionette is a composite application
library for Backbone.js that aims to simplify the
construction of large scale JavaScript applications.
It is a collection of common design and
implementation patterns found in the applications that
we have been building with Backbone, and includes
pieces inspired by composite application
architectures, event-driven architectures, messaging
architectures, and more.
46. Backbone.Marionette is a composite application
library for Backbone.js that aims to simplify the
construction of large scale JavaScript applications.
It is a collection of common design and
implementation patterns found in the applications that
we have been building with Backbone, and includes
pieces inspired by composite application
architectures, event-driven architectures, messaging
architectures, and more.
47. Backbone.Marionette is a composite application
library for Backbone.js that aims to simplify the
construction of large scale JavaScript applications.
It is a collection of common design and
implementation patterns found in the applications that
we have been building with Backbone, and includes
pieces inspired by composite application
architectures, event-driven architectures, messaging
architectures, and more.
48. Backbone.Marionette is a composite application
library for Backbone.js that aims to simplify the
construction of large scale JavaScript applications.
It is a collection of common design and
implementation patterns found in the applications that
we have been building with Backbone, and includes
pieces inspired by composite application
architectures, event-driven architectures, messaging
architectures, and more.
49. Backbone.Marionette is a composite application
library for Backbone.js that aims to simplify the
construction of large scale JavaScript applications.
It is a collection of common design and
implementation patterns found in the applications that
we have been building with Backbone, and includes
pieces inspired by composite application
architectures, event-driven architectures, messaging
architectures, and more.
50. var MyView = Marionette.ItemView.extend({
el: '#content',
template: '#template',
serializeData: function() {
return {
language: 'Marionette'
};
}
});
var myView = new MyView();
myView.render();
<div id="content"></div>
<script id="template" type="text/template">
<h1>Hello from <%- language %>!</h1>
</script>
http://codepen.io/coffeeandcode/pen/raWBWE
53. My Challenge
• build apps with
production data in
mind
• consider non-technical
needs of project
• show love for all
technology choices,
but be hesitant to
adopt new libraries
Time Machine: my cohort, Eric Browning, is talking about “No More Static Comps: Design Process in the Modern World” at 11am in Salon D.
I’m a consultant that gets to work with lots of different clients and I get to write (and see) a lot of different code. To keep it professional, no names in presentation or during questions besides my own.
Most programmers get paid to write code. They work on different projects.
I get paid to work on MANY different projects. Get to see a lot of good/bad practices, work in different languages, solve different problems. I can bring unique perspective to projects.
Client = Widget Factory
if you haven’t guessed, no real names please
Widget Factory hired Vendor Co to build a web application. A dashboard. Many moving pieces / parts. We will focus on front-end UI.
* show latest numbers from server
* chart shows historical numbers over past X hours
* data loaded when app loads and polls every X seconds
data from API server was in bloated format
adding features felt like it was taking too much time
there was some code pairing and information sharing to help bridge gap
everyone had best intentions in mind
best intentions in mind
Ember has easy data binding, easily update views when data updates
I used Backbone in many projects before, comfortable
laughable, does not provide much in terms of “structure”
organizes jQuery spaghetti code (still useful)
the “M” in MVC, organization of data
JS Objects and Arrays with enumeration management methods
utilize events for having app adapt to changes in state
uniform way to manage DOM events and create custom events
logic to map data and state changes to what the user sees and interacts with
ends up doing most of the work
* views have events as well, no biggie nowadays but useful for separation of responsibility
pushes JSON out of the box
can be customized, but it can be painful and require a lot of custom code
opinionated collection of “best practices”
does a lot of the grunt work for you
* created to tackle complicated web applications
(highlight parts of the definition giving a real explanation of what that means for the developer)
* same as Backbone and most front-end “frameworks”
this is where Ember truly shines
directional team very interested in providing best of breed, open to changing technologies
start to build relationships between data
separate library called Ember.data that handles async data retrieval
Backbone all manual, Ember is automatic
router gets quite a bit of praise
much more powerful than Backbones, handles tiers of triggered controllers (nice if your app plays well with well structured urls)
I’m not used to it yet
surprised to see conversations of Rails bloat, but flocking to Ember
two way data binding by default produces unnecessary overhead
follows Rails, easy to write code, also easy to not know what you wrote (how much computation behind the scenes?)
app still suffered from two big issues
* original app looked great with 10 - 20 items
* needed to show more than 500, also limited by other architecture choices
load all the dataz!
write less code, bind more things
render it all
Comparing Backbone w/Marionette to Vendor Co’s
took TodoMVC app and “productionized” assets to take performance numbers
I downloaded TodoMVC examples and got line counts
what I believe was the biggest issue with Vendor Co’s app
Widget Factory can’t maintain something they don’t understand
they would have been disappointed in any solution they received
* technical solution delivered that did not account for non-technical project needs
* how often things broke in lib or architectural decisions
* keyword is “our”, built entire structure with assistance from Widget Factory employees
* discuss how our solution addressed non-technical needs of project
* team uplift / pairing
* designing a workflow together
* explicit code rather than implicit magic
* amount (and quality) of documentation for js libs and css framework (bootstrap)
abstracted JS workflow into common Grunt library
abstracted common application system and code into common UI library
this will create a Layout based on your application’s main layout
you “export” what you want other files to be able to require
all dependencies must be required
Browserify handles dependency management
all source is concatenated into one js file (automatically skips unused source code)
built upon Backbone and
Backbone.Wreqr (messaging patterns for Backbone apps)
Backbone.BabySitter (manage child views)
* Wreqr changing to Backbone Radio in upcoming release of Marionette
removes the copy/paste boilerplate for view rendering from Backbone
bringing design patterns into Backbone:
Application singleton
module loader
view hierarchies
view behaviors (sectioned responsibilities for a single view)
template caching
view regions / region managers
view hierarchies
ItemView, LayoutView, CollectionView, CompositeView
Regions and RegionManagers
Backbone.Wreqr / Radio that uses channels (ex: “global”)
commands (do something, don’t care about response)
event aggregator (custom events attached to your application)
request / response (return data from request)
My challege to all of you
consider non-technical needs or else miss expectations on delivery
hesitate to introduce new technologies to solve the problem
think about the REAL problems and what it takes to solve them, do not focus on only technical problems