Workshop: EmberJS - In Depth
- Ember Data - Adapters & Serializers
- Routing and Navigation
- Templates
- Services
- Components
- Integration with 3rd party libraries
Presentado por ingenieros: Mario García y Marc Torrent
Workshop Apps with ReactNative III:
- React Native short Recap
- The Native Side
- Building Native Modules (iOS & Android)
- Building Native Components (iOS & Android)
Presentado por ingenieros Alberto Irurueta y Enrique Oriol
Workshop Apps with ReactNative II:
- React Native short Recap
- Navigation in React Native Apps
- Tabs & Other Architectural Components
- Lists & Other Presentational Components
- OpenSource Important Components
Presentado por ingenieros Raúl Delgado y Marc Torrent
Workshop Apps with ReactNative III:
- React Native short Recap
- The Native Side
- Building Native Modules (iOS & Android)
- Building Native Components (iOS & Android)
Presentado por ingenieros Alberto Irurueta y Enrique Oriol
Workshop Apps with ReactNative II:
- React Native short Recap
- Navigation in React Native Apps
- Tabs & Other Architectural Components
- Lists & Other Presentational Components
- OpenSource Important Components
Presentado por ingenieros Raúl Delgado y Marc Torrent
Value types are at the core of Swift (seriously, mostly everything in the Swift standard library is a value type). But how do you avoid subclassing? That’s where the power of Protocol-Oriented programming comes in. Learn how to structure your code to never subclass (almost) again! Practical everyday examples and ideas for your own code base will be included.
«От экспериментов с инфраструктурой до внедрения в продакшен»FDConf
В процессе разработки инструментов для инфраструктурных нужд получилось изучить технологии, которые легли в основу нового стека фронтенд разработки для мобильной версии «Одноклассников».
В результате удалось решить следующие задачи:
— улучшение качества продукта за счёт юнит тестирования и методологии TDD;
— снижение порога входа для новых фронтенд разработчиков;
— автоматизация процессов разработки, сборки и тестирования.
В докладе рассматривается использование следующих технологий: karma, jasmine, webpack, bower и gulp.
Asyc flow control with javascript generators - redux-sagaPedro Solá
Designing complex asynchronous interaction flows can be a real mess. It gets a lot cleaner with generators. We'll learn how to build bulletproof flows in React Native using redux-sagas.
How to build to do app using vue composition api and vuex 4 with typescriptKaty Slemon
In this tutorial, we will build a to-do app using Vue Composition API & Vuex 4 with Typescript. We will learn and explore Composition API & Options API as well
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.
Slides for the 2016 Redux & Angular workshop. Redux is a popular library for state management. This workshop is about understanding how to use Redux and how to integrate it wit Angular 2
Value types are at the core of Swift (seriously, mostly everything in the Swift standard library is a value type). But how do you avoid subclassing? That’s where the power of Protocol-Oriented programming comes in. Learn how to structure your code to never subclass (almost) again! Practical everyday examples and ideas for your own code base will be included.
«От экспериментов с инфраструктурой до внедрения в продакшен»FDConf
В процессе разработки инструментов для инфраструктурных нужд получилось изучить технологии, которые легли в основу нового стека фронтенд разработки для мобильной версии «Одноклассников».
В результате удалось решить следующие задачи:
— улучшение качества продукта за счёт юнит тестирования и методологии TDD;
— снижение порога входа для новых фронтенд разработчиков;
— автоматизация процессов разработки, сборки и тестирования.
В докладе рассматривается использование следующих технологий: karma, jasmine, webpack, bower и gulp.
Asyc flow control with javascript generators - redux-sagaPedro Solá
Designing complex asynchronous interaction flows can be a real mess. It gets a lot cleaner with generators. We'll learn how to build bulletproof flows in React Native using redux-sagas.
How to build to do app using vue composition api and vuex 4 with typescriptKaty Slemon
In this tutorial, we will build a to-do app using Vue Composition API & Vuex 4 with Typescript. We will learn and explore Composition API & Options API as well
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.
Slides for the 2016 Redux & Angular workshop. Redux is a popular library for state management. This workshop is about understanding how to use Redux and how to integrate it wit Angular 2
Web APIs have revolutionized all kinds of products and services, and still continue to do so. Nowadays the most relevant architecture is REST along with the JSON media type. Furthermore, lots of specifications to serialize those media types are appearing. JSON API has released its first version last May.
Brian and John introduce several concepts, including JavaScript Modules and Inversion of Control, and demonstrate how they alleviate many of the dominant problems encountered when building large JavaScript apps. This talk shows new architectural patterns and tangible examples of how these patterns improve testability, refactorability, composability, division of work, and team scalability.
Learn the best practices and advanced techniques.
* Passing data to client libs, use the data attribute
* Expression contexts, choose wisely
* Use statement best practices, what fits best your needs
* Template & Call statements advanced usage
* Parameters for sub-resources, featuring resource attributes and synthetic resources
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
http://www.visual-engin.com/blog/testing-protocolos-y-extensiones-ios-workshop/
Workshop Testing, protocolos y extensiones:
- Objetivos
- Requisitios
- Protocols
- Configurar proyecto en xcode
- Tests unitarios
- Integración continua
- Material de interés
Presentado por ingenieros Alberto Irurueta y Alejandro García
Workshop fundamentos de Swift:
- Language Basics
- Playgrounds
- Variables
- Functions
- Optionals
- Control Flow
Presentado por nuestros ingenieros Alberto Irurueta y Pia Muñoz.
Workshop Apps with ReactNative I:
- What is React Native?
- Native Components
- Asynchronous execution
- Debugging
- Live Reload/Hot reload
- Flexbox and styling
- It’s just a JS framework!
- Native Components
- Native APIs
- Native modules
- Some Thoughts on Production Development
Presentado por ingeniero Jordi Serra
Workshop JavaScript Testing. Frameworks. Client vs Server Testing. Jasmine. Chai. Nock. Sinon. Spec Runners: Karma. TDD. Code coverage. Building a testable JS app.
Presentado por ing: Raúl Delgado y Mario García
Graspan: A Big Data System for Big Code AnalysisAftab Hussain
We built a disk-based parallel graph system, Graspan, that uses a novel edge-pair centric computation model to compute dynamic transitive closures on very large program graphs.
We implement context-sensitive pointer/alias and dataflow analyses on Graspan. An evaluation of these analyses on large codebases such as Linux shows that their Graspan implementations scale to millions of lines of code and are much simpler than their original implementations.
These analyses were used to augment the existing checkers; these augmented checkers found 132 new NULL pointer bugs and 1308 unnecessary NULL tests in Linux 4.4.0-rc5, PostgreSQL 8.3.9, and Apache httpd 2.2.18.
- Accepted in ASPLOS ‘17, Xi’an, China.
- Featured in the tutorial, Systemized Program Analyses: A Big Data Perspective on Static Analysis Scalability, ASPLOS ‘17.
- Invited for presentation at SoCal PLS ‘16.
- Invited for poster presentation at PLDI SRC ‘16.
OpenMetadata Community Meeting - 5th June 2024OpenMetadata
The OpenMetadata Community Meeting was held on June 5th, 2024. In this meeting, we discussed about the data quality capabilities that are integrated with the Incident Manager, providing a complete solution to handle your data observability needs. Watch the end-to-end demo of the data quality features.
* How to run your own data quality framework
* What is the performance impact of running data quality frameworks
* How to run the test cases in your own ETL pipelines
* How the Incident Manager is integrated
* Get notified with alerts when test cases fail
Watch the meeting recording here - https://www.youtube.com/watch?v=UbNOje0kf6E
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...Crescat
Crescat is industry-trusted event management software, built by event professionals for event professionals. Founded in 2017, we have three key products tailored for the live event industry.
Crescat Event for concert promoters and event agencies. Crescat Venue for music venues, conference centers, wedding venues, concert halls and more. And Crescat Festival for festivals, conferences and complex events.
With a wide range of popular features such as event scheduling, shift management, volunteer and crew coordination, artist booking and much more, Crescat is designed for customisation and ease-of-use.
Over 125,000 events have been planned in Crescat and with hundreds of customers of all shapes and sizes, from boutique event agencies through to international concert promoters, Crescat is rigged for success. What's more, we highly value feedback from our users and we are constantly improving our software with updates, new features and improvements.
If you plan events, run a venue or produce festivals and you're looking for ways to make your life easier, then we have a solution for you. Try our software for free or schedule a no-obligation demo with one of our product specialists today at crescat.io
Zoom is a comprehensive platform designed to connect individuals and teams efficiently. With its user-friendly interface and powerful features, Zoom has become a go-to solution for virtual communication and collaboration. It offers a range of tools, including virtual meetings, team chat, VoIP phone systems, online whiteboards, and AI companions, to streamline workflows and enhance productivity.
First Steps with Globus Compute Multi-User EndpointsGlobus
In this presentation we will share our experiences around getting started with the Globus Compute multi-user endpoint. Working with the Pharmacology group at the University of Auckland, we have previously written an application using Globus Compute that can offload computationally expensive steps in the researcher's workflows, which they wish to manage from their familiar Windows environments, onto the NeSI (New Zealand eScience Infrastructure) cluster. Some of the challenges we have encountered were that each researcher had to set up and manage their own single-user globus compute endpoint and that the workloads had varying resource requirements (CPUs, memory and wall time) between different runs. We hope that the multi-user endpoint will help to address these challenges and share an update on our progress here.
Software Engineering, Software Consulting, Tech Lead, Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Transaction, Spring MVC, OpenShift Cloud Platform, Kafka, REST, SOAP, LLD & HLD.
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.
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.
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I didn't get rich from it but it did have 63K downloads (powered possible tens of thousands of websites).
Utilocate offers a comprehensive solution for locate ticket management by automating and streamlining the entire process. By integrating with Geospatial Information Systems (GIS), it provides accurate mapping and visualization of utility locations, enhancing decision-making and reducing the risk of errors. The system's advanced data analytics tools help identify trends, predict potential issues, and optimize resource allocation, making the locate ticket management process smarter and more efficient. Additionally, automated ticket management ensures consistency and reduces human error, while real-time notifications keep all relevant personnel informed and ready to respond promptly.
The system's ability to streamline workflows and automate ticket routing significantly reduces the time taken to process each ticket, making the process faster and more efficient. Mobile access allows field technicians to update ticket information on the go, ensuring that the latest information is always available and accelerating the locate process. Overall, Utilocate not only enhances the efficiency and accuracy of locate ticket management but also improves safety by minimizing the risk of utility damage through precise and timely locates.
Atelier - Innover avec l’IA Générative et les graphes de connaissancesNeo4j
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Allez au-delà du battage médiatique autour de l’IA et découvrez des techniques pratiques pour utiliser l’IA de manière responsable à travers les données de votre organisation. Explorez comment utiliser les graphes de connaissances pour augmenter la précision, la transparence et la capacité d’explication dans les systèmes d’IA générative. Vous partirez avec une expérience pratique combinant les relations entre les données et les LLM pour apporter du contexte spécifique à votre domaine et améliorer votre raisonnement.
Amenez votre ordinateur portable et nous vous guiderons sur la mise en place de votre propre pile d’IA générative, en vous fournissant des exemples pratiques et codés pour démarrer en quelques minutes.
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Globus
Large Language Models (LLMs) are currently the center of attention in the tech world, particularly for their potential to advance research. In this presentation, we'll explore a straightforward and effective method for quickly initiating inference runs on supercomputers using the vLLM tool with Globus Compute, specifically on the Polaris system at ALCF. We'll begin by briefly discussing the popularity and applications of LLMs in various fields. Following this, we will introduce the vLLM tool, and explain how it integrates with Globus Compute to efficiently manage LLM operations on Polaris. Attendees will learn the practical aspects of setting up and remotely triggering LLMs from local machines, focusing on ease of use and efficiency. This talk is ideal for researchers and practitioners looking to leverage the power of LLMs in their work, offering a clear guide to harnessing supercomputing resources for quick and effective LLM inference.
Mobile App Development Company In Noida | Drona InfotechDrona Infotech
Looking for a reliable mobile app development company in Noida? Look no further than Drona Infotech. We specialize in creating customized apps for your business needs.
Visit Us For : https://www.dronainfotech.com/mobile-application-development/
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI AppGoogle
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-fusion-buddy-review
AI Fusion Buddy Review: Key Features
✅Create Stunning AI App Suite Fully Powered By Google's Latest AI technology, Gemini
✅Use Gemini to Build high-converting Converting Sales Video Scripts, ad copies, Trending Articles, blogs, etc.100% unique!
✅Create Ultra-HD graphics with a single keyword or phrase that commands 10x eyeballs!
✅Fully automated AI articles bulk generation!
✅Auto-post or schedule stunning AI content across all your accounts at once—WordPress, Facebook, LinkedIn, Blogger, and more.
✅With one keyword or URL, generate complete websites, landing pages, and more…
✅Automatically create & sell AI content, graphics, websites, landing pages, & all that gets you paid non-stop 24*7.
✅Pre-built High-Converting 100+ website Templates and 2000+ graphic templates logos, banners, and thumbnail images in Trending Niches.
✅Say goodbye to wasting time logging into multiple Chat GPT & AI Apps once & for all!
✅Save over $5000 per year and kick out dependency on third parties completely!
✅Brand New App: Not available anywhere else!
✅ Beginner-friendly!
✅ZERO upfront cost or any extra expenses
✅Risk-Free: 30-Day Money-Back Guarantee!
✅Commercial License included!
See My Other Reviews Article:
(1) AI Genie Review: https://sumonreview.com/ai-genie-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
#AIFusionBuddyReview,
#AIFusionBuddyFeatures,
#AIFusionBuddyPricing,
#AIFusionBuddyProsandCons,
#AIFusionBuddyTutorial,
#AIFusionBuddyUserExperience
#AIFusionBuddyforBeginners,
#AIFusionBuddyBenefits,
#AIFusionBuddyComparison,
#AIFusionBuddyInstallation,
#AIFusionBuddyRefundPolicy,
#AIFusionBuddyDemo,
#AIFusionBuddyMaintenanceFees,
#AIFusionBuddyNewbieFriendly,
#WhatIsAIFusionBuddy?,
#HowDoesAIFusionBuddyWorks
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.
6. Communication with backend
How we access data
DS.Adapter
DS.Serializer
As of Ember Data 2.0, the default Adapter and Serializer follow JSON API format.
REST API
Ember
Ember Data
Format of the data
7. JSON API Specification
Content-Type: application/vnd.api+json
Top level attribute “data”
Attribute names are dasherized
Attribute “type” should be pluralized
It’s about the data...
8. JSON API Specification
..but also about the end points!
Action HTTP Verb URL Response status*
Find GET /articles/123
200 - Successful
404 - Not found
Find All GET /articles
200 - Successful
404 - Not found
Update PATCH /articles/123
200 - Successful
204 - No Content
Create POST /articles
201 - Created
204 - No Content
Delete DELETE /articles/123
200 - Successful
204 - No Content
*More response statuses are possible. See the complete specification at http://jsonapi.org/format/
9. Adapters
Extend/build your own adapters to fit your needs!
Priority rules apply between adapters!
DS.Adapter
DS.JSONAPIAdapter
DS.RESTAdapter
How to communicate with backend
10. Customize your adapter (1 of 3)
// app/adapters/application.js
export default DS.JSONAPIAdapter.extend({
host: 'https://api.example.com',
namespace: 'api/v1'
});
store.findRecord('post', 1) GET request to http://api.example.com/api/v1/posts/1
Host customization - Endpoint path customization
store.findAll('person') GET request to http://api.example.com/api/v1/people
store.findAll('user-profile') GET request to http://api.example.com/api/v1/user-profiles
11. Customize your adapter (2 of 3)
Type path customization
// app/adapters/application.js
export default DS.JSONAPIAdapter.extend({
pathForType(type) {
return Ember.String.underscore(type);
}
});
store.findRecord('post', 1) GET request to /post/1
store.findAll('person') GET request to /person
store.findAll('user-profile') GET request to /user_profile
Headers customization
// app/adapters/application.js
export default DS.JSONAPIAdapter.extend({
headers: {
'API_KEY': 'secret key',
'ANOTHER_HEADER': 'Some header value'
}
});
12. Customize your adapter (3 of 3)
Pluralization customization
Ember Inflector at your rescue!
Allows definition of irregular and uncountable pluralizations
Houston...
Our API REST serves at the following endpoints:
➔ /formulae (instead of the regular form /formulas)
➔ /advice (instead of the pluralized form /advices)
...do we have a PROBLEM?
14. Serializing data sent to backend
Customize your serializer (1 of 4)
// JSON generated by Ember Data
{
"data": {
"attributes": {
"name": "Product",
"amount": 100,
"currency": "SEK"
},
"type": "product"
}
}
// But server expects...
{
"data": {
"attributes": {
"name": "Product",
"cost": {
"amount": 100,
"currency": "SEK"
}
},
"type": "product"
}
}
Change the format of the data sent to backend with the serialize() hook.
15. Normalizing data received from backend
Customize your serializer (2 of 4)
// Server response
{
"id": "1",
"body": "A comment!",
"date": {
"offset": "GMT+0200 (CEST)",
"value": "Tue Apr 05 2016"
}
}
// But Ember Data expects...
{
"id": "1",
"body": "A comment!",
"offset": "GMT+0200 (CEST)",
"value": "Tue Apr 05 2016"
}
Change the format of the data received from backend with the
normalizeResponse() hook.
16. Identifier
Customize your serializer (3 of 4)
Specify your resource identifier key
through primaryKey property
export default DS.JSONSerializer.extend({
primaryKey: '_id'
});
Attribute names
If the JSON payload does not match your Ember model attribute names...
// app/models/person.js
export default DS.Model.extend({
lastName: DS.attr('string')
});
// app/serializers/person.js
export default DS.JSONAPISerializer.extend({
attrs: {
lastName: 'lastNameOfPerson'
}
});
17. Custom transforms
Customize your serializer (4 of 4)
Use custom transforms if the server sends data that does not fit any Ember Data
built-in attributes (string, number, boolean and date)
A custom transform should implement the serialize() and deserialize()
Once implemented, it can be used as a regular type of attribute
19. Routing - Implicit routes
ember g route users
ember g route users/edit
application
application-loading
application-error
index
index-loading
index-error
users users-error
users/index
users-loading
users/edit
*All routes have its .hbs associated templates
loading
error
users/edit-error
users/edit-loading
users/index-loading
users/index-error
users/loading
users/error
20. Routing - Serve more than one model
Promises, promises, promises!
Ember.RSVP.hash resolves when all its promises parameters resolve
Be extra careful when using hash in the model() hook in cases where the hook
is not executed*
*See http://stackoverflow.com/questions/20521967/emberjs-how-to-load-multiple-models-on-the-same-route
Alternatively, you can use route nesting to load multiple models
More info in http://emberigniter.com/load-multiple-models-single-route/
21. Routing - Rendering a specific template
// app/routes/posts/new.js
export default Ember.Route.extend({
renderTemplate() {
this.render('posts/form');
}
});
It is possible to render a specific template through the renderTemplate()
hook.
DRY*!!!!!
*Don’t Repeat Yourself
// app/routes/posts/edit.js
export default Ember.Route.extend({
renderTemplate() {
this.render('posts/form');
}
});
22. Routing - Preventing and retrying transitions
Invoke transition.abort() to immediately abort the current transition
Store the transition object and re-attempt invoking transition.retry()
Every transition attempt fires the willTransition action on the current active
routes, starting with the leaf-most route
Ember Router passes a transition object to various hooks on the involved routes
export default Ember.Route.extend({
beforeModel(transition) {},
model(params, transition) {},
afterModel(model, transition) {}
});
23. Routing - Loading routes
When navigating to /users route, Ember will try to find loading templates*:
users-loading
loading or application-loading
The router pauses transitions until the promises returned from beforeModel,
model and afterModel hooks fulfill
An intermediate transition into a loading substate happens immediately
The URL won’t be updated on the loading transition
*See https://github.com/emberjs/ember.js/issues/12367
A loading event will be fired on that route
24. Routing - Error routes
When an error occurs navigating to /users, Ember will try to find templates*:
users-error
error or application-error
Analogous approach to loading substates in the case of errors
An intermediate transition into an error substate happens in case of thrown
error or rejected promise
The URL won’t be updated on the error transition
*See https://github.com/emberjs/ember.js/issues/12367
An error event will be fired on that route
25. Routing - Query params
{{#link-to "episodes" (query-params filter="simp")}}Episodes{{/link-to}}
transitionTo('episodes', { queryParams: { filter: 'simp' }});
Query params are declared on route-driven controllers
Use controller’s queryParams property to bind query params and URL
Query params to backend
Query params in frontend
transitionTo
link-to helper
store.query('episodes', { filter: 'simp' });
27. ➢ Data Binding in template attributes
➢ Links
➢ Actions
➢ Input Helpers
➢ Write your own helpers
28. Data Binding in Templates
Controller’s Properties
<div class=”_tomster”>
<img src={{tomster.img}}
width=100>
</div>
DOM Attributes
<div class=”_tomster”>
<input type=”checkbox”
disabled={{tomster.disabled}}>
<img src={{tomster.img}}
width=100>
</div>
Collections
{{#each cartoons as |cartoon|}}
<div class=”_cartoon”>
<input type=”checkbox”
disabled={{cartoon.disabled}}>
<img src={{cartoon.img}}
width=100>
</div>
{{/each}}
29. Links: {{#link-to }}
A helper for links in our application without the need of using anchors and
href.
Router.map( function() {
this.route(‘about’);
this.route(‘cartoons’, function() {
this.route(‘cartoon’, {path: ‘/:cartoon_id’});
});
});
<ul>
{{#each model as |cartoon|}}
<li>{{#link-to "cartoons.cartoon"
cartoon}}{{cartoon.name}}{{/link-to}}
</li>
{{/each}}
</ul>
<ul>
<li><a href="/cartoon/1">Columbus Tomster</a></li>
<li><a href="/cartoon/2">LTS Tomster</a></li>
</ul>
30. Links: {{#link-to }} - Multiple Segments
We pass the model to the most inner nested route. The model() hook won’t be
called on routes where we specify the model through the link-to.
Router.map( function() {
this.route(‘cartoons’, function() {
this.route(cartoon, {path: ‘/:cartoon_id’},
function() {
this.route(‘specs’);
this.route(‘spec’, {path: ‘/specs/:
spec_id’});
});
});
});
<ul>
{{#each cartoons as |cartoon|}}
{{#each cartoon.specs as |spec|}}
<li>{{#link-to "cartoons.cartoon.
spec" spec}}{{spec.name}}{{/link-to}}
</li>
{{/each}}
{{/each}}
</ul>
31. Links: The Route that went away… (I)
Be careful with the structure of the templates and routes and beware of
models that you pass into the routes
32. Links: The Route that went away… (II)
Be careful with the structure of the templates and routes and beware of
models that you pass into the routes
Keep an eye on how you distribute your outlets and the relation between
index.hbs and the current template in our nested route.
Let’s see it in action!
Now you tell me what should I
place in the router - routes -
templates and link-to
33. Actions
1. Template helper for binding a DOM Event with a
Controller/Route/Component.
2. It can accept parameters such as Ember.Objects, Models or basic data
structures.
3. You can also specify the type of event by using the “on” option
4. By default, actions prevent the default browser action on a DOM Element.
To turn down this behavior, pass the option preventDefault=false
34. Input Helpers {{input}} {{textarea}}
1. Template helper for <input> and <textarea> DOM Elements.
2. Forget about actions with inputs and use the the input helpers as EmberJS
provides out of the box 2-way data-binding
3. Pass HTML and HTML5 attributes
4. Use it also with radio and checkboxes
35. Write Your Own Helpers
Custom template helpers for your own needs. Keep an eye on addons to see if
someone else has already written the helper you need.
ember generate helper
i18n
That file should export a function
wrapped with Ember.Helper.
helper()
The function receives a bundle
destination as string as the first
parameter (params[0]) and the key
to look for as the second parameter
(params[1])
To pass multiple arguments to a
helper, add them as a space-
separated list after the helper name
Use named Parameters to make
behavior of helpers configurable
export function i18n([bundle, key], {lang,
toUpperCase}) {
let resource = dictionary[bundle][key],
translation = lang? resource[lang] :
resource[DEFAULT_LANG];
return toUpperCase? translation.
toUpperCase() : translation;
}
export default Ember.Helper.helper(i18n);
<p>{{i18n "catalog" "category"
lang="es"}}</p>
<p>{{i18n "catalog" "category"}}</p>
<p>{{i18n "catalog" "category"}}</p>
<p>{{i18n "catalog" "product"
toUpperCase="true"}}</p>
38. Services - For What?
Services are useful for features that require shared state or persistent connections.
User/session authentication
Geolocation
Web Sockets
Server-sent events or notifications
Server-backed API calls that may
not fit Ember Data
Third-party APIs
Logging
Internationalization
39. Services - and How can I use it?
Create the Service:
ember generate service i18n
Services must extend the
Ember.Service base class:
Ember.Service.extend({});
Basic Service Advanced Service
Use the service in an Ember Object or
inherited:
i18n: Ember.inject.service()
The Service will be injected by the same
name we are assigning to a variable (i18n)
USE YOUR IMAGINATION, EVERYTHING
IS POSSIBLE!
41. LA JOYA DE LA CORONA
AND ROUTABLE COMPONENTS ARE COMING!!
42. Components: Definition
➢ A reusable partial view (template with Handlebars) with controller that
can be combined with other components and contain other components.
❖ Components are used in route templates.
❖ They have a specific life cycle and can handle actions of their template and
also pass actions to their containing components, routes and controllers.
❖ At this moment components are not routable but soon they will become
routable and then, controllers will disappear.
❖ At this moment, EmberJS 2.4.0, All components need to be included inside
a template route that, by definition, has a Shim Controller.
❖ You can think of Components as widgets that are reusable through all our
application and that expose a template helper per usage.
ember generate component my-component
→ components/my-component.js
→ templates/my-component.hbs
<ul>
<li>{{my-component}}</li>
</ul>
43. Components: Passing Properties
➢ Pass Properties TOP - DOWN to components. Always from route
templates or other components to the destination component.
export default Ember.Route.extend({
model() {
return this.store.findAll('actor');
}
});
<ul>
{{#each model as |actor|}}
<li>{{actor-component actor=actor}}</li>
{{/each}}
</ul>
<div>{{actor.name}}<span {{action "toggleSection"}} style="margin-left: 5px;">{{more}}
</span></div>
{{#if showImage}}
<div><img src="{{actor.img}}" width="200px"></div>
{{/if}}
44. Components: Wrapping Content
➢ Let the developer use your component by passing custom content into it.
○ The template using your component will pass an html block inside the
component
○ The component MUST define the {{yield}} expression in its template
○ The component MUST be used in block form: {{#my-component}}...
{{/my-component}}
<div>{{yield}}<span {{action
"toggleSection"}}>{{more}}</span>
</div>
{{#if showImage}}
<div>
<img src="{{actor.img}}" width="200px">
</div>
{{/if}}
<ul>
{{#each model as |actor|}}
<li>{{#actor-component actor=actor}}
<p>{{actor.name}}</p>
{{/actor-component}}
</li>
{{/each}}
</ul>
45. Components: LifeCycle
➢ Access to hooks when the component is going to be rendered or
destroyed.
➢ It enables you to:
○ Direct DOM manipulation
○ Listening and responding to browser events
○ Using 3rd party JavaScript libraries in your Ember app
Initial Rendering:
1 init
2 didReceiveAttrs
3 willRender
4 didInsertElement
5 didRender
Re-Rendering:
1 didUpdateAttrs
2 didReceiveAttrs
3 willUpdate
4 willRender
5 didUpdate
Component Destroy:
1 willDestroyElement
2 willClearRender
3 didDestroyElement
6 didRender
46. Components: Data Down - Actions Up
➢ Keep the idea that state (properties) always travels in one direction:
TOP - DOWN.
➢ Instead, event handling (actions) always travel in the opposite direction:
BOTTOM-UP.
➢ Components and Controllers can handle actions from their contained
Components. See it as a data synchronization hub.
export default Ember.Component.extend({
actions: {
toggleSection() {
this.toggleProperty('showImage');
this.get('onSelected')(this);
}
}
export default Ember.Controller.extend({
actions: {
sectionShown(selectedActor) {
this.set('selectedActor', selectedActor);
}
}
});
{{actor-component actor=actor onSelected=(action "sectionShown")}}
47. Components: Transversal Communication
➢ In some situations components can not be on the same parent.
➢ We need a data-layer and a BUS using Pub-Sub
➢ For this purpose, use a Service extending Ember.Evented
export default Ember.Component.extend({
Appointment: Ember.inject.service(),
actions: {
complete() {
this.get(‘appointment’).trigger(‘complete’);
}
}
});
export default Ember.Component.extend({
appointment: Ember.inject.service(),
willRender() {
this.get(‘appoinment’).on(‘complete’,
this, ‘onComplete’);
},
onComplete() {
// Do Something
}
});
49. Integrate into the Ember using the asset manifest file ember-cli-build.js
Integration with 3rd party libraries
If an Ember addon exists... Install via Ember CLI and you are ready to go!
Front-end dependencies can be installed through Bower Package Manager
Other assets can (and should) just be placed in the vendor folder of the project
app.import({
development: 'bower_components/moment.js',
production: 'bower_components/moment.min.js'
});
app.import('vendor/amd.js', {
exports: {
'amd': ['raw', 'request']
}
});
Globals AMD Modules