This document discusses using CoffeeScript, Backbone.js, and Jasmine BDD to build single page web applications. It begins by explaining why CoffeeScript is useful for cleaning up JavaScript code and avoiding errors. It then discusses how Backbone.js provides structure for single page apps by defining models, collections, views and routers. It notes that Backbone works well with CoffeeScript. Finally, it mentions that Jasmine BDD can be used for writing professional tests.
This was a talk given at Django District in March, 2016. It goes over the general gist of how to integrate Django Rest Framework with React and Redux. It also includes a github repo with working code, including using Webpack for Hot Reloading and Redux Dev Tools for time traveling state.
Keeping the frontend under control with Symfony and WebpackIgnacio Martín
Webpack tutorial with tips for Symfony users. Topics covered include: current frontend trends, setup, loaders, dev tools, optimization in production, bundle splitting and tips and tricks for using webpack with existing projects.
Symfony Munich Meetup 2016.
Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...Ryan Weaver
If you're like me, you know that being a great backend developer isn't enough. To make *truly* great applications, we need to spend significant time in an area that's moving at a lightning pace: frontend development.
This talk is for you: the backend developer that wants to hook their API's up to rich, interactive JavaScript frontends. To do that, first, we need to demystify a lot of new terms, like ES6/ES2015, ECMAScript, JSX, Babel and the idea that modern JavaScript (surprise) *requires* a build step.
With this in mind, I'll give you a brief introduction into Webpack & the modular development it finally allows.
But the real star is ReactJS. In the frontend world, you never know what new tech will *win*, but React is a star. I'll give you enough of an intro to get you rolling on your project.
The new frontend dev world is huge! Consider the starting line down an exciting new journey.
Ember.js - introduction
I have searched for Ember ppt in the internet. Got many things but not like structured... So i have just combined and made a new one..
I am just learning and not an expert. Please share your comments, so i can keep up myself..
This was a talk given at Django District in March, 2016. It goes over the general gist of how to integrate Django Rest Framework with React and Redux. It also includes a github repo with working code, including using Webpack for Hot Reloading and Redux Dev Tools for time traveling state.
Keeping the frontend under control with Symfony and WebpackIgnacio Martín
Webpack tutorial with tips for Symfony users. Topics covered include: current frontend trends, setup, loaders, dev tools, optimization in production, bundle splitting and tips and tricks for using webpack with existing projects.
Symfony Munich Meetup 2016.
Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...Ryan Weaver
If you're like me, you know that being a great backend developer isn't enough. To make *truly* great applications, we need to spend significant time in an area that's moving at a lightning pace: frontend development.
This talk is for you: the backend developer that wants to hook their API's up to rich, interactive JavaScript frontends. To do that, first, we need to demystify a lot of new terms, like ES6/ES2015, ECMAScript, JSX, Babel and the idea that modern JavaScript (surprise) *requires* a build step.
With this in mind, I'll give you a brief introduction into Webpack & the modular development it finally allows.
But the real star is ReactJS. In the frontend world, you never know what new tech will *win*, but React is a star. I'll give you enough of an intro to get you rolling on your project.
The new frontend dev world is huge! Consider the starting line down an exciting new journey.
Ember.js - introduction
I have searched for Ember ppt in the internet. Got many things but not like structured... So i have just combined and made a new one..
I am just learning and not an expert. Please share your comments, so i can keep up myself..
A look at how HTML5 aims to plug the holes that Flash has been filling in browsers for the last decade, looking at both HTML5 and non-HTML5 JavaScript APIs.
For Flash Brighton in Feb 2010.
Good karma: UX Patterns and Unit Testing in Angular with KarmaExoLeaders.com
If you listen to backend developers, they will tell you that writing unit tests is essential to good karma. Pay it forward with tests and get back a reliable application. But getting unit tests running on the front end in a “real” application can be a lot more challenging. This intermediate-beginner level workshop will cover how to get setup for writing unit tests, and how to write front-end and end-to-end oriented unit tests for a variety of use cases all for AngularJS. We will work from a series of use cases, transform those into formal acceptance tests, write failing unit tests and then resolve those tests writing code with Angular, html/jade/css and node.
Presentation by Laura Ferguson and Boris Kan @ Create, inc, 2015
Workshop Isomorphic Web Apps with ReactJS:
- Universal web apps - Isomorphic
- Server Side Rendering (SSR) with ReactJS
- Server Side Rendering with Redux
- Server Side Rendering with React Router
- Server Side Rendering: server.js - Main Entry Point
- Server Side Rendering: server.js - HTML Template
- Client main entry point: client.js
- Webpack bundles
- Avoiding FOUC - Webpack ExtractTextPlugin
- Webpack code splitting
- React Router - Configuration with Plain Routes
- React Router - Dynamic Routing & WebPack
- Dynamic Routing with new Reducers
- Combining new Reducers - ReducerRegistry
- Data fetching before rendering
- React Router + Redux + Redial: Server Side
- React Router + Redux + Redial: provideHooks
- React Router + Redux + Redial: Client Side
- SEO friendly universal web apps - React-Helmet
- React-Helmet - Server Side Rendering
Presentado por ingeniero: Marc Torrent
A quick overview of tips, tricks and code snippets for developers using Symfony and all its ecosystem, from Monolog to Doctrine. Learn how to become more productive and discover some rarely used options and features.
Caldera Learn - LoopConf WP API + Angular FTW WorkshopCalderaLearn
The WordPress REST API combined with a JavaScript MVC framework opens up new possibilities for better, more intuitive interfaces that solve scaling and other challenges. In this workshop we will use AngularJS, the best — because we said so — and the WordPress REST API to create custom applications. First we will walk through creating custom API routes and endpoints to interact with your data, followed by two unique ways to use AngularJS to create better interfaces for your projects. This will include a decoupled front-end and single page web app as a plugin interface.
Take a look at what Rails 5 has in store for you. We go through all the new features and improvements across development, testing, caching and much more. So let's dive in.
eact is a library for building HTML user interfaces. It is the "view" in a Model-View-Controller application. Created by the UI wizards at Facebook, top websites like Instagram, Netflix, Airbnb, Bleacher Report and Feedly use it. React is the 6th most starred project on GitHub and grows more popular every day.
In this two-day workshop, we will introduce you to React. On the first day, we will work through a series of increasingly more complicated tutorial exercises. Along the way, we will explain concepts like JSX, immutability, statefulness, one-way data flow, components, and virtual DOM.
With the basics out of the way, we will spend the second-day building a complex application which will put React through its paces and give us a chance to explore most of its features. Then we will learn how to think in React. We will show you how to go from design to components to working application. We will wrap the weekend with a quick preview of React Native, which allows you to use your React skills to create cross-platform mobile apps.
Introducing Assetic: Asset Management for PHP 5.3Kris Wallsmith
The performance of your application depends heavily on the number and size of assets on each page. Even your blazingly fastest Symfony2 application can be bogged down by bloated Javascript and CSS files. This session will give you a basic introduction to PHP's new asset management framework, Assetic, and explore how it integrates with Symfony2 for a pleasant, common sense developer experience.
Crossing the Bridge: Connecting Rails and your Front-end FrameworkDaniel Spector
Presented at Railsconf 2015 by Daniel Spector, @danielspecs.
Crossing the Bridge explores tools, patterns and best practices to connect your Javascript MVC framework to Rails in the most seamless way possible. The talk progresses from demonstrating the standard API request cycle to preloading data to your client-side framework to rendering your javascript on the server. It explores Isomorphic Javascript and ways of implementing it with Rails.
A look at how HTML5 aims to plug the holes that Flash has been filling in browsers for the last decade, looking at both HTML5 and non-HTML5 JavaScript APIs.
For Flash Brighton in Feb 2010.
Good karma: UX Patterns and Unit Testing in Angular with KarmaExoLeaders.com
If you listen to backend developers, they will tell you that writing unit tests is essential to good karma. Pay it forward with tests and get back a reliable application. But getting unit tests running on the front end in a “real” application can be a lot more challenging. This intermediate-beginner level workshop will cover how to get setup for writing unit tests, and how to write front-end and end-to-end oriented unit tests for a variety of use cases all for AngularJS. We will work from a series of use cases, transform those into formal acceptance tests, write failing unit tests and then resolve those tests writing code with Angular, html/jade/css and node.
Presentation by Laura Ferguson and Boris Kan @ Create, inc, 2015
Workshop Isomorphic Web Apps with ReactJS:
- Universal web apps - Isomorphic
- Server Side Rendering (SSR) with ReactJS
- Server Side Rendering with Redux
- Server Side Rendering with React Router
- Server Side Rendering: server.js - Main Entry Point
- Server Side Rendering: server.js - HTML Template
- Client main entry point: client.js
- Webpack bundles
- Avoiding FOUC - Webpack ExtractTextPlugin
- Webpack code splitting
- React Router - Configuration with Plain Routes
- React Router - Dynamic Routing & WebPack
- Dynamic Routing with new Reducers
- Combining new Reducers - ReducerRegistry
- Data fetching before rendering
- React Router + Redux + Redial: Server Side
- React Router + Redux + Redial: provideHooks
- React Router + Redux + Redial: Client Side
- SEO friendly universal web apps - React-Helmet
- React-Helmet - Server Side Rendering
Presentado por ingeniero: Marc Torrent
A quick overview of tips, tricks and code snippets for developers using Symfony and all its ecosystem, from Monolog to Doctrine. Learn how to become more productive and discover some rarely used options and features.
Caldera Learn - LoopConf WP API + Angular FTW WorkshopCalderaLearn
The WordPress REST API combined with a JavaScript MVC framework opens up new possibilities for better, more intuitive interfaces that solve scaling and other challenges. In this workshop we will use AngularJS, the best — because we said so — and the WordPress REST API to create custom applications. First we will walk through creating custom API routes and endpoints to interact with your data, followed by two unique ways to use AngularJS to create better interfaces for your projects. This will include a decoupled front-end and single page web app as a plugin interface.
Take a look at what Rails 5 has in store for you. We go through all the new features and improvements across development, testing, caching and much more. So let's dive in.
eact is a library for building HTML user interfaces. It is the "view" in a Model-View-Controller application. Created by the UI wizards at Facebook, top websites like Instagram, Netflix, Airbnb, Bleacher Report and Feedly use it. React is the 6th most starred project on GitHub and grows more popular every day.
In this two-day workshop, we will introduce you to React. On the first day, we will work through a series of increasingly more complicated tutorial exercises. Along the way, we will explain concepts like JSX, immutability, statefulness, one-way data flow, components, and virtual DOM.
With the basics out of the way, we will spend the second-day building a complex application which will put React through its paces and give us a chance to explore most of its features. Then we will learn how to think in React. We will show you how to go from design to components to working application. We will wrap the weekend with a quick preview of React Native, which allows you to use your React skills to create cross-platform mobile apps.
Introducing Assetic: Asset Management for PHP 5.3Kris Wallsmith
The performance of your application depends heavily on the number and size of assets on each page. Even your blazingly fastest Symfony2 application can be bogged down by bloated Javascript and CSS files. This session will give you a basic introduction to PHP's new asset management framework, Assetic, and explore how it integrates with Symfony2 for a pleasant, common sense developer experience.
Crossing the Bridge: Connecting Rails and your Front-end FrameworkDaniel Spector
Presented at Railsconf 2015 by Daniel Spector, @danielspecs.
Crossing the Bridge explores tools, patterns and best practices to connect your Javascript MVC framework to Rails in the most seamless way possible. The talk progresses from demonstrating the standard API request cycle to preloading data to your client-side framework to rendering your javascript on the server. It explores Isomorphic Javascript and ways of implementing it with Rails.
Come to this talk prepared to learn about the Doctrine PHP open source project. The Doctrine project has been around for over a decade and has evolved from database abstraction software that dates back to the PEAR days. The packages provided by the Doctrine project have been downloaded almost 500 million times from packagist. In this talk we will take you through how to get started with Doctrine and how to take advantage of some of the more advanced features.
Slide links:
- https://lumberjack.rareloop.com
- https://docs.lumberjack.rareloop.com
- https://github.com/Rareloop/lumberjack-bedrock-installer
- https://github.com/Rareloop/lumberjack
- https://github.com/Rareloop/lumberjack-validation
- https://github.com/Rareloop/hatchet
- https://lizkeogh.com/2017/08/31/reflecting-reality/amp
- https://www.upstatement.com/timber
- https://roots.io/bedrock
- https://scotch.io/bar-talk/s-o-l-i-d-the-first-five-principles-of-object-oriented-design
- https://github.com/zendframework/zend-diactoros
- https://www.php-fig.org
- http://php-di.org
---
Often WordPress themes are not easy to change, maintain or fun to work on. This can rule WordPress out as a viable option for bespoke, non-trivial websites.
In this talk we’ll dive into how this happens & look at how we can benefit from software engineering techniques to help make your code easier to change. I’ll also show how using Lumberjack, a powerful MVC framework built on Timber, can be used to power-up your themes.
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptGuy Royse
Long ago, in the late days of the first Internet boom, before jQuery, before Underscore, before Angular, there was a web application built by a large corporation. This application was written as a server-side application using server-side technology like Java or PHP. A tiny seed of JavaScript was added to some of the pages of this application to give it a little sizzle.
Over the ages, this tiny bit of JavaScript grew like kudzu. Most of it was embedded in the HTML in
Integrating React.js Into a PHP ApplicationAndrew Rota
React.js has taken the web development world by storm, and for good reason: React offers a declarative, component-oriented approach to building highly-scalable web UIs. But how can we take advantage of a JavaScript library like React in our server-side PHP applications. In this talk l cover the different ways React.js can be integrated into an existing PHP web application: from a client-side only approach to multiple techniques that support full server-side rendering with a Node.js server or PHP’s v8js. I also discuss the trade-offs in each of these designs and the challenges involved with adding React to a PHP site. Most importantly, I consider the higher-level issue of how to improve view cohesion across the client-server divide in a PHP application.
Slides from talk given at Ithaca Web Group and GORGES on CoffeeScript.
The focus is on explaining to people who haven't tried it yet that it's more than syntactic sugar. There are several real life code examples but they were explained verbally so they may not be super helpful if you don't know CoffeeScript yet.
It's an overview, not a tutorial.
The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript'...Ben Teese
Web development is experiencing a major change at the moment. Users are demanding increasingly responsive and interactive web applications. The mobile web has taken off. And closed platforms like Flash are yielding to open standards like HTML 5.
In this presentation I’ll argue that the language that will underpin this revolution is JavaScript – despite it’s poor reputation. Furthermore, I’ll explain how JavaScript’s resurrection is being driven by a slew of new open-source technologies.
For video of this presentation, see http://www.youtube.com/watch?v=SiCD3Nbf810
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
Using Backbone.js to move state to the client-side and the benefits of using a JavaScript MVC framework.
Delivered at SuperMondays, Newcastle upon Tyne, on 26th September 2011.
Similar to Single Page Web Applications with CoffeeScript, Backbone and Jasmine (20)
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
4. What can you expect?
• What I am doing?
• Why is CoffeeScript so awesome?
• The era before Backbone;
• Fix browser spaghetti code with Backbone;
• Be professional: with Jasmine BDD;
5. Assumptions
• You know your Javascript;
• and your JQuery;
• You developed for the web before.
47. More awesomeness...
number = -42 if opposite
math =
square: (x) -> x * x
race = (winner, runners...) ->
print winner, runners
alert "I knew it!" if elvis?
squares = (math.square num for num in list)
52. Namespaces are cool
class namespace('views').MyView
new oncast.views.MyView()
@.namespace = (name) ->
@.oncast ||= {}
return @.oncast[name] ||= {} if name
return @.oncast
78. Works nicely with
CoffeeScript
Inheritance.
https://github.com/documentcloud/backbone/blob/master/test/model.coffee
79. Works nicely with
CoffeeScript
Inheritance.
class Car extends Backbone.Model
https://github.com/documentcloud/backbone/blob/master/test/model.coffee
83. Models / Collections
class Reference extends Backbone.Model
urlRoot: "/references"
class References extends Backbone.Collection
model: Reference
url: '/references'
Model Model Model
Collection
84. Fetch Collection
# creates a new collection
references = new References
# fetch data asynchronously
references.fetch()
85. Fetch Collection
# creates a new collection
references = new References
# fetch data asynchronously
references.fetch()
[{
id: 1
JSON name: "Paulo's House",
latitude: '10',
longitude: '15'
}]
88. Model attributes
# get reference with id 1
reference = references.get 1
# get the name property of the model
name = reference.get 'name'
89. Model attributes
# get reference with id 1
reference = references.get 1
# get the name property of the model
name = reference.get 'name'
# change the name property of the model
reference.set name: 'new name'
90. Model attributes
# get reference with id 1
reference = references.get 1
# get the name property of the model
name = reference.get 'name'
# change the name property of the model
reference.set name: 'new name'
# save the model to the server
reference.save()
102. Using a View
# creates a new instance of the view
view = new SaveButtonView()
103. Using a View
# creates a new instance of the view
view = new SaveButtonView()
# render it
view.render()
104. Using a View
# creates a new instance of the view
view = new SaveButtonView()
# render it
view.render()
# append the content of the view on the doc
$('.some-div').html view.el
126. The View will represent
one model/collection
forever!
127. Broken events
# append the view's element to the document
$('.div').append view.el
# remove it
$('.div').empty
# add it again
$('.div').append view.el
View events (click, change) will no longer work.
128. Collection.getOrFetch
class Posts extends Backbone.Collection
url: "/posts"
getOrFetch: (id) ->
if @get(id)
post = @get id
else
post = new Post { id : id }
@add post
post.fetch()
post
http://bennolan.com/2011/06/10/backbone-get-or-fetch.html
131. Lazy fetching
class LazyFetchView extends Backbone.View
render: ->
if @model.isFullyFetched()
# if the data is ready we render it
$(@el).html ...
else
# otherwise we fetch the data
# rendering the loading indicator
@fetch()
return @
136. given a delete button view
when the user clicks the view
then it should delete the model
137. Jasmine:
given a delete button view
when the user clicks the view
then it should delete the model
describe 'DeleteButtonView', ->
context 'when the user clicks the view', =>
it 'should delete the model'
139. describe 'DeleteButton', ->
context 'when the user clicks the view', =>
it 'should delete the model', =>
expect(@model.delete).toHaveBeenCalledOnce()
140. describe 'DeleteButton', ->
context 'when the user clicks the view', =>
it 'should delete the model', =>
expect(@model.delete).toHaveBeenCalledOnce()
http://sinonjs.org/
https://github.com/froots/jasmine-sinon
141. describe 'DeleteButton', ->
beforeEach =>
@model = new Backbone.Model
@deleteButton = new DeleteButton(model: @model)
context 'when the user clicks the view', =>
it 'should delete the model', =>
expect(@model.delete).toHaveBeenCalledOnce()
142. describe 'DeleteButton', ->
beforeEach =>
@model = new Backbone.Model
@deleteButton = new DeleteButton(model: @model)
context 'when the user clicks the view', =>
beforeEach =>
sinon.spy @model, 'delete'
it 'should delete the model', =>
expect(@model.delete).toHaveBeenCalledOnce()
143. describe 'DeleteButton', ->
beforeEach =>
@model = new Backbone.Model
@deleteButton = new DeleteButton(model: @model)
context 'when the user clicks the view', =>
beforeEach =>
sinon.spy @model, 'delete'
@deleteButton.render()
$(@deleteButton.el).click()
it 'should delete the model', =>
expect(@model.delete).toHaveBeenCalledOnce()
144. Run it headless!
Text
http://johnbintz.github.com/jasmine-headless-webkit/