Introduce yapi.js, an adaptive streaming web player.
This slides has 3 main topics:
1. How yapi.js implement adaptive streaming with HTML5 media element and MSE (Media Source Extension).
2. How to create ui for playback with native javascript.
3. Compare jasmine and mocha, and some tips about unit test.
This slide telling what "adaptive streaming" is. In the beginning, it explains how content(media) is prepared to fit adaptive needs, then talking about yapi.js - which is the web player used by KKTV(VOD service) in Taiwan.
This topic introduces tools to automate the development and deployment workflow of a WordPress web application.
I am showing the main benefits of such a workflow and how it allows making the installation and update of the project fully automatic, predictable, versioned, and ready to be integrated into a continuous deployment system. Tools like Docker and WP-CLI, will be introduced to implement that process along with a simple tool that I have developed to automatically deploy the basic data that a project needs to be up and running.
My mantra? No manual clicks whatsoever in the web interface for configuring WordPress!
This slide telling what "adaptive streaming" is. In the beginning, it explains how content(media) is prepared to fit adaptive needs, then talking about yapi.js - which is the web player used by KKTV(VOD service) in Taiwan.
This topic introduces tools to automate the development and deployment workflow of a WordPress web application.
I am showing the main benefits of such a workflow and how it allows making the installation and update of the project fully automatic, predictable, versioned, and ready to be integrated into a continuous deployment system. Tools like Docker and WP-CLI, will be introduced to implement that process along with a simple tool that I have developed to automatically deploy the basic data that a project needs to be up and running.
My mantra? No manual clicks whatsoever in the web interface for configuring WordPress!
You will learn:
• How to use Elastic Beanstalk
• How to run Single and Multi-Container Docker with AWS Elastic Beanstalk
• Best Practices running AWS Elastic Beanstalk
Migrating from Pivotal tc Server on-prem to IBM Liberty in the cloudJohn Donaldson
The airline company was trying to create a new mobile check-in solution hosted on the cloud, to improve availability in peak usage check-in times which are unpredictable during any given time in the week. They saw the cloud as the way to accomplish this without maintaining costly disaster recovery centers.
Balaji Parimi VMware R&D describes best practices when using the vSphere APIs. The VMware vSphere APIs can be used to build VMware vSphere management solutions. Virtual Machines, Host Management, Performance Monitoring. To learn more visit our community. http://developer.vmware.com
Ansible is a Configuration Management System that is very simple to use, because of its straightforward and robust model for managing automation and it’s low barrier to entry for ease of use in both development and production.
During OpenStack development, Ansible can be used in conjunction with Vagrant and Devstack to manage complex, multi-node development environments with relative ease.
In this presentation, Juergen Brendel and David Lapsley review Ansible and provide some sample playbooks to get developers up and running quickly. They also describes how to use Ansible, Vagrant, Devstack, and OpenStack to accelerate OpenStack development cycles.
WebSphere App Server vs JBoss vs WebLogic vs Tomcat (InterConnect 2016)Roman Kharkovski
Presented at InterConnect 2016 in Las Vegas, this presentation provides a view on the differences between WebSphere Application Server and Liberty Profile vs. competitive offerings, such as Apache Tomcat, Red Hat JBoss and Oracle WebLogic. It covers both the technical (feature/function) as well as cost considerations (TCA, TCO).
Adobe AEM Maintenance - Customer Care Office HoursAndrew Khoury
This presentation covers how to maintain Adobe Experience Manager 6.x (AEM / CQ / Communiqué) environments.
See the presentation video here:
https://helpx.adobe.com/experience-manager/kt/eseminars/ccoo-aem-Aug-recording.html
Mobile applications Development - Lecture 10
HTML5 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
Underpinning all data management initiatives is the fundamental need to get data quality right. Poor data quality can be costly, impact customer service, lead to errors in risk management and regulatory reporting, and more. So, how can you improve data quality? How can you use rules, standardisation and technology to make improvements? And how is ‘right’ data quality measured?
Listen to the webinar to find out about:
Requirements for data quality
Challenges of achieving data quality
Data quality metrics
Supporting tools and technology
Operational and business gains
You will learn:
• How to use Elastic Beanstalk
• How to run Single and Multi-Container Docker with AWS Elastic Beanstalk
• Best Practices running AWS Elastic Beanstalk
Migrating from Pivotal tc Server on-prem to IBM Liberty in the cloudJohn Donaldson
The airline company was trying to create a new mobile check-in solution hosted on the cloud, to improve availability in peak usage check-in times which are unpredictable during any given time in the week. They saw the cloud as the way to accomplish this without maintaining costly disaster recovery centers.
Balaji Parimi VMware R&D describes best practices when using the vSphere APIs. The VMware vSphere APIs can be used to build VMware vSphere management solutions. Virtual Machines, Host Management, Performance Monitoring. To learn more visit our community. http://developer.vmware.com
Ansible is a Configuration Management System that is very simple to use, because of its straightforward and robust model for managing automation and it’s low barrier to entry for ease of use in both development and production.
During OpenStack development, Ansible can be used in conjunction with Vagrant and Devstack to manage complex, multi-node development environments with relative ease.
In this presentation, Juergen Brendel and David Lapsley review Ansible and provide some sample playbooks to get developers up and running quickly. They also describes how to use Ansible, Vagrant, Devstack, and OpenStack to accelerate OpenStack development cycles.
WebSphere App Server vs JBoss vs WebLogic vs Tomcat (InterConnect 2016)Roman Kharkovski
Presented at InterConnect 2016 in Las Vegas, this presentation provides a view on the differences between WebSphere Application Server and Liberty Profile vs. competitive offerings, such as Apache Tomcat, Red Hat JBoss and Oracle WebLogic. It covers both the technical (feature/function) as well as cost considerations (TCA, TCO).
Adobe AEM Maintenance - Customer Care Office HoursAndrew Khoury
This presentation covers how to maintain Adobe Experience Manager 6.x (AEM / CQ / Communiqué) environments.
See the presentation video here:
https://helpx.adobe.com/experience-manager/kt/eseminars/ccoo-aem-Aug-recording.html
Mobile applications Development - Lecture 10
HTML5 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
Underpinning all data management initiatives is the fundamental need to get data quality right. Poor data quality can be costly, impact customer service, lead to errors in risk management and regulatory reporting, and more. So, how can you improve data quality? How can you use rules, standardisation and technology to make improvements? And how is ‘right’ data quality measured?
Listen to the webinar to find out about:
Requirements for data quality
Challenges of achieving data quality
Data quality metrics
Supporting tools and technology
Operational and business gains
Given at YAPC::EU 2012
Dancer + WebSocket + AnyEvent + Twiggy
This in *not* a talk about doing a hello world in Dancer, as there are plenty of it. This is a real-life example of using Dancer to address a problem in an elegant and powerful way
At $job, we have cpan mirrors. We want them to stay a bit behind the real CPAN for stability, but we have a tool to update modules from the real CPAN to our mirrors. Cool.
I wanted to have a web interface to trigger it, and monitor the injection. This problem is not a typical one (blog, wiki, CRUD, etc). Here we have a long running operation that shall happen only one at a time, that generates logs to be displayed, with states that need keeping. In this regard, it's interesting to see how Dancer is versatile enough to address these situations with ease.
This talk details how I did that, the technology I used, and the full source code (which is quite short). I used Dancer + WebSocket + AnyEvent + Twiggy + some other stuff.
This talk doesn't require any particular knowledge beyond basic Perl, and very basic web server understanding.
Slides for the hands on lightning component workshop that is accompanying the trailhead found https://developer.salesforce.com/trailhead/project/account-geolocation-app
This is the workshop presentation material for the Lightning Components Hands-On Workshop (HOW) being presented at Dreamforce 2015 in the DevZone. This content pairs with the Lightning Components Trailhead project live in Trailhead as of Dreamforce 2015.
We describe the deployment and use of Globus Compute for remote computation. This content is aimed at researchers who wish to compute on remote resources using a unified programming interface, as well as system administrators who will deploy and operate Globus Compute services on their research computing infrastructure.
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.
Into the Box Keynote Day 2: Unveiling amazing updates and announcements for modern CFML developers! Get ready for exciting releases and updates on Ortus tools and products. Stay tuned for cutting-edge innovations designed to boost your productivity.
How to Position Your Globus Data Portal for Success Ten Good PracticesGlobus
Science gateways allow science and engineering communities to access shared data, software, computing services, and instruments. Science gateways have gained a lot of traction in the last twenty years, as evidenced by projects such as the Science Gateways Community Institute (SGCI) and the Center of Excellence on Science Gateways (SGX3) in the US, The Australian Research Data Commons (ARDC) and its platforms in Australia, and the projects around Virtual Research Environments in Europe. A few mature frameworks have evolved with their different strengths and foci and have been taken up by a larger community such as the Globus Data Portal, Hubzero, Tapis, and Galaxy. However, even when gateways are built on successful frameworks, they continue to face the challenges of ongoing maintenance costs and how to meet the ever-expanding needs of the community they serve with enhanced features. It is not uncommon that gateways with compelling use cases are nonetheless unable to get past the prototype phase and become a full production service, or if they do, they don't survive more than a couple of years. While there is no guaranteed pathway to success, it seems likely that for any gateway there is a need for a strong community and/or solid funding streams to create and sustain its success. With over twenty years of examples to draw from, this presentation goes into detail for ten factors common to successful and enduring gateways that effectively serve as best practices for any new or developing gateway.
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?
Check out the webinar slides to learn more about how XfilesPro transforms Salesforce document management by leveraging its world-class applications. For more details, please connect with sales@xfilespro.com
If you want to watch the on-demand webinar, please click here: https://www.xfilespro.com/webinars/salesforce-document-management-2-0-smarter-faster-better/
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.
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.
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
Large Language Models and the End of ProgrammingMatt Welsh
Talk by Matt Welsh at Craft Conference 2024 on the impact that Large Language Models will have on the future of software development. In this talk, I discuss the ways in which LLMs will impact the software industry, from replacing human software developers with AI, to replacing conventional software with models that perform reasoning, computation, and problem-solving.
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.
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Shahin Sheidaei
Games are powerful teaching tools, fostering hands-on engagement and fun. But they require careful consideration to succeed. Join me to explore factors in running and selecting games, ensuring they serve as effective teaching tools. Learn to maintain focus on learning objectives while playing, and how to measure the ROI of gaming in education. Discover strategies for pitching gaming to leadership. This session offers insights, tips, and examples for coaches, team leads, and enterprise leaders seeking to teach from simple to complex concepts.
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.
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar
The European Union Agency for Law Enforcement Cooperation (Europol) has suffered an alleged data breach after a notorious threat actor claimed to have exfiltrated data from its systems. Infamous data leaker IntelBroker posted on the even more infamous BreachForums hacking forum, saying that Europol suffered a data breach this month.
The alleged breach affected Europol agencies CCSE, EC3, Europol Platform for Experts, Law Enforcement Forum, and SIRIUS. Infiltration of these entities can disrupt ongoing investigations and compromise sensitive intelligence shared among international law enforcement agencies.
However, this is neither the first nor the last activity of IntekBroker. We have compiled for you what happened in the last few days. To track such hacker activities on dark web sources like hacker forums, private Telegram channels, and other hidden platforms where cyber threats often originate, you can check SOCRadar’s Dark Web News.
Stay Informed on Threat Actors’ Activity on the Dark Web with SOCRadar!
Listen to the keynote address and hear about the latest developments from Rachana Ananthakrishnan and Ian Foster who review the updates to the Globus Platform and Service, and the relevance of Globus to the scientific community as an automation platform to accelerate scientific discovery.
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.
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.
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Globus
The Earth System Grid Federation (ESGF) is a global network of data servers that archives and distributes the planet’s largest collection of Earth system model output for thousands of climate and environmental scientists worldwide. Many of these petabyte-scale data archives are located in proximity to large high-performance computing (HPC) or cloud computing resources, but the primary workflow for data users consists of transferring data, and applying computations on a different system. As a part of the ESGF 2.0 US project (funded by the United States Department of Energy Office of Science), we developed pre-defined data workflows, which can be run on-demand, capable of applying many data reduction and data analysis to the large ESGF data archives, transferring only the resultant analysis (ex. visualizations, smaller data files). In this talk, we will showcase a few of these workflows, highlighting how Globus Flows can be used for petabyte-scale climate analysis.
Quarkus Hidden and Forbidden ExtensionsMax Andersen
Quarkus has a vast extension ecosystem and is known for its subsonic and subatomic feature set. Some of these features are not as well known, and some extensions are less talked about, but that does not make them less interesting - quite the opposite.
Come join this talk to see some tips and tricks for using Quarkus and some of the lesser known features, extensions and development techniques.
6. VIDEO ELEMENT
var videoNode = document.createElement(‘video’);
videoNode.src = VIDEO_URL;
With html5 video element, you can play single video source easily
more info here: https://goo.gl/Fyi3Z3
7. MSE
“ MSE (Media Source Extension) extends HTMLMediaElement to allow
JavaScript to generate media streams for playback.
Allowing JavaScript to generate streams facilitates a variety of use cases like
adaptive streaming and time shifting live streams.“
8. var video = document.createElement(‘video’);
video.src = VIDEO_URL
MEDIASOURCE IS A ‘SOURCE’
set ‘src’ attribute of video element to an url pointed to media
source
new window.MediaSource();window.URL.createObjectURL(ms);
9. SOURCE BUFFER
sourceBufferVideo = ms.addSourceBuffer(VIDEO_CODEC);
sourceBufferAudio = ms.addSourceBuffer(AUDIO_CODEC);
// get stream buffer via network
sourceBufferVideo.appendBuffer(buffer);
// sourcebuffer provides buffer info after append complete
10. BUFFER INFO
var buffered = sourceBuffer.buffered;
buffered.length; // how many discontinuous buffered time range
buffered.start(0); // first buffer start time
buffered.end(0); // first buffer end time
get buffer information from buffered attribute
11. ADAPTIVE STREAMING
// assume segment of time 0s~5s is needed
// yapi would decide which bitrate to download
loadSegment(segment_1_240p_url);
// segment file doesn’t have meta data, we have to append it first
sourceBuffer.appendBuffer(init_240p_buffer);
// then loaded segment
sourceBuffer.appendBuffer(segment_1_240p_buffer);
// if yapi decide to load 480p for 5~10s (adaptive algorithm)
// then yapi repeat same process, but with 480p
// then playback would be 240p during 0~5s and 480p for 5~10s
12. GRAPH
yapi append stream buffer to
sourcebuffer ‘adaptively’
Media
Source
Media
Element
media element plays
while available
13. MSE EXTENDS MEDIA ELEMENT
• MSE focus on providing stream buffer to media
element
• playback behavior still hold by media element
15. USEFUL EVENTS FORYAPI.JS
loadstart: Indicate loading media begins, this fires when setting src attribute
loadedmetadata: while element has basic info of playback, e.g duration
timeupdate: while current time of playback is ticking
seeking/seeked: while conducting seek
ended: playback ends
play/playing: playback resume from other status to playing
17. ADDITIONAL EVENTS
loadedmanifest: after manifest is loaded/parsed
bitratechanged: when bitrate is changed
enableabr: when adaptive activation changed
buffering: when playback pending
cuechanged: webvtt subtitle cue changed (in and out)
19. SEEK BEHAVIOR 1
• mediaElement.currentTime = TIME_SEEK_TO
will conduct seek
• use yapi.seek(TIME_SEEK_TO) instead
20. SEEK BEHAVIOR 2
• seek is totally done by mediaElement, so yapi.js listen to
seeking and seeked event to know seek starts and ends
• seeking event dispatched by yapi would have seekFrom and
seekTo as parameters
21. PENDING DETECTION
• No useful event to indicate pending situation
waiting stalled emptied
• pending detection is done on every timeupdate event, yapi.js
would check media source buffered length
22. PLAYBACK END
• mediaElement dispatch ended event natively when playback
goes to end
• but not while attaching media source to it
• mediaSource.endOfStream() must be invoked beforehand
24. SUMMARY
• media source provide stream buffer for mediaElement
mediaElement.src = createObjectURL(ms)
• listen to events dispatched by yapi, instead of mediaElement
• use api exposed by yapi (call api of mediaElement not
recommended) e.g seek
25. M3U8 ON SAFARI
• attach m3u8 to mediaElement on safari by simply
mediaElement.src = URL_TO_M3U8
30. SLIDER CLASS
• slider constructor takes a node and orientation as
mandatory parameters
• it focus on
1. locate pointer with given param (event or percentage)
2. return location with given param
3. notify listeners events occurred
31. TAKE A LOOK AT PROGRESS BAR
• played bar
• buffered bar
• seek time indicator
• preview
33. BEHAVIOR FLOW
scenario 1: progress changed by app. e.g yapi.seek(TIME) invoked
MediaCtrlPanel ProgressBar slideryapi
scenario 2: progress changed by user interaction, e.g click on slider
MediaCtrlPanel ProgressBar slideryapi
34. SCENARIO 1: FROM APP
MediaCtrlPanel.onSeeking(event)yapi.seek(time)
MediaCtrlPanel listens to ‘seeking’ event emitted from yapi,
then calculates percentage of current progress
(currentTime / totalDuration)
35. SCENARIO 1: FROM APP
MediaCtrlPanel. ProgressBar.locatePointer(percentage)yapi.seek(time)
36. SCENARIO 1: FROM APP
MediaCtrlPanel. ProgressBar.locatePointer(percentage)
slider.locatePointer(percentage)
yapi.seek(time)
progressBar update played bar
37. SCENARIO 1: FROM APP
MediaCtrlPanel. ProgressBar.locatePointer(percentage)
slider.locatePointer(percentage)
yapi.seek(time)
slider.locatePointer would invoke method locatePointerInternal,
with1. it’s argument 2. notToDispatchEvent as true (I know it’s tricky)
38. SCENARIO 2: FROM SLIDER
assume user conduct seek by click on slider, b/c
slider.addEventListener(‘click', locatePointerInternal);
so it will dispatch POINTER_LOCATED event
slider
(Remember notToDispatchEvent param?)
39. SCENARIO 2: FROM SLIDER
progressBar listens to ‘POINTER_LOCATED’ event and
update played bar
ProgressBar slider
40. SCENARIO 2: FROM SLIDER
MediaCtrlPanel also listens to ‘POINTER_LOCATED’ event
and it will invoke yapi.seek(calculatedTime)
(percentage of time is within POINTER_LOCATED event obj)
MediaCtrlPanel
ProgressBar
slideryapi
41. A LESSON
“ take care of flow direction, or it might be an infinite loop “
MediaCtrlPanel ProgressBar slideryapi
yapi MediaCtrlPanel ProgressBar slider
43. LISTENTO EVENT
consider on these 2 phrases
“ progressBar listens to ‘POINTER_LOCATED’ event “
“ MediaCtrlPanel also listens to ‘POINTER_LOCATED’ event “
44. BAD IMPLEMENTATION
but it works!
progressBar.addEventListener();mediaCtrlPanel.addEventListener();
slider.addEventListener(POINTER_LOCATED, callback);
45. ADD LISTENER
it would call method with same name of eventBus
slider eventBus.addEventListener(POINTER_LOCATED, callback)
while invoking this, eventBus will manipulate an object holding
map of event name and callback.
in the case, POINTER_LOCATED would be key,
and an array as value with callback pushed into it.
46. DISPATCH EVENT
POINTER_LOCATED is an event from slider
it will find array of key: POINTER_LOCATED,
and invoke every element (callback) of it.
slider eventBus.dispatchEvent(POINTER_LOCATED)
47. WHAT’STHE BAD PART?
• mediaCtrlPanl needs a reference of slider
MediaCtrlPanel ProgressBar sliderconflicts with
mediaCtrlPanel.addEventListener();
slider.addEventListener();
• for every dispatcher, an eventBus instance is needed
slider eventBus.addEventListener() eventBus.dispatchEvent()
assume progressBar would dispatch a ‘PROGRESS_BAR_HIDE’ event,
then every module which listens this event needs progressBar reference,
and progressBar needs a private eventBus for mapping
progressBar? another eventBus
48. TAKE A LOOK AT DOM EVENT
while click on <td>
<table> would also get it
“by default”
http://www.w3.org/TR/DOM-Level-3-Events/
HOW COME?
<td>.addEventListener(‘click’, callback)
<table>.addEventListener(‘click’, callback)
49. TAKE A LOOK AT DOM EVENT
http://www.w3.org/TR/DOM-Level-3-Events/
a singleton eventBus holds
by every node
while add listener
it knows which node listens
while dispatching
it invoke callback with node as context
53. INITIALIZATION DETAIL
• in client app, invoke new MediaCtrlPanel()
• in panel.setup(), loads template html
• after html loaded, apply component functions
also initialize progress-bar and volume-ui
54. IF A MODULE HANDLINGTHIS
• that module called ‘yapiDOM’ with a method ‘render’
• takes 2 parameters:1. constructor of a component,
2. selected node this component would mount on
• while `render()` invoked, yapiDOM will instantiate given
constructor and run setup method of component
(load template and apply component functions )
57. IFYAPIDOM ALSO HANDLESTHIS
• yapiDOM has another method ‘createElement’
• takes 2 parameters:1. constructor of a component,
2. object with map of key/variable
• while `createElement()` invoked, yapiDOM will instantiate
given constructor and run setup method of component
58. SETUP COMPONENT
1. load html (js sync / html async)
2. apply component functions
3. hold reference of given map object
4. return created component node
61. SUMMARY
Component
1. have a conventional ‘setup’
method with yapiDOM
2. setting these while setup:
• template
• behavior
• reference
yapiDOM
1. createElement method:
run instance method ‘setup’ of
given component class
2. render method:
append node to target node
attach singleton eventBus here
66. RUN ON COMMAND LINE
• can be run on phantomJS, a headless browser
• easier integrate with CI
67. TASK RUNNER
• grunt-mocha takes html file as
source
• for grunt-jasmine, set up
source, vendor, spec
javascript files in task config
68. WHICH I PREFER
• flexibility comes with complexity
• mocha can do everything, so it’s important that you
make choice and being consistent
• jasmine is capable enough for client-side unit test
69. TDD / BDD
• mocha.setup() can decide which strategy to use (link)
• it’s just the difference between syntax
70. TIPS OF WRITINGTEST
• it doesn’t matter which strategy to adopt, just get your hands
dirty
• get code coverage 100%
• add relevant test case while adding feature (b/c there must be a
reason you do this)
• also while fixing bug (prevent from occurs again)
72. CONSIDERTHESE FEATURES
• watch on modification
• preprocess
• run on different browsers simultaneously
• code coverage report
73. KARMA IS…
• a test runner
• would spawn a server by default on port 9876
which serves test cases
74. CONFIG KARMA
• list needed plugins
• decide which framework and browsers to run on
• setup preprocessors
• list reporters
• list required helpers, vendors, sources and specs in files
75. TIPS
• setup different config for developing and CI
developing: runs on different browsers
CI: runs on phantomjs with coverage report
• if grunt-watch is exploited, it’s better to disable
watch feature of karma
i.e each karma run is a single run, and re-run it when file changed
76. THANKYOU
w3 mse spec, media event sample
MDN media element doc, HTMLMediaElement doc
dash.js
Angular.js Directive doc
React.js Getting Start tutorial
ref: