Sencha Tooling and Framework brings enterprise-grade development tools to Ext JS including visual application builders, theme designers, and debugging tools to help developers quickly build performant and beautiful applications. The document demonstrates using Sencha Architect to visually build a news application, and highlights new features in Architect 4.1 like support for premium components, grid enhancements, and importing themes from Themer. Sencha's tools help developers improve productivity and adopt Ext JS frameworks easily.
Organizations of all sizes are begging their technical departments to setup SharePoint 2010 so that they're able to make use of some of the capabilities introduced within the SharePoint 2010 platform. While designing, implementing, configuring and deploying a system in and of itself has its own set of challenges, migrating into that shiny new SharePoint can be even more difficult.In this session, Scott and Dan will share some of their experiences and lessons learned tips, tricks and pointers for ensuring that you've considered the various aspects of challenges that arise during a migration effort. Further, as a bonus they'll share how to not fall prey to some of these pitfalls but rather be able to show that you're a well-rounded professional that's thought things through before pressing the enter key.
January’s call, hosted by Kim Brandl, featured the following presenters and topics:
-Alex Jerabek, Dev Writer, provided a general overview of Office Add-ins.
-Raymond Lu, Senior Program Manager, shared information about Excel preview (beta) APIs in requirement set 1.11.
-Vesa Juvonen, Principal Program Manager, presented about building Office Add-ins using the SharePoint Framework.
-Kim Brandl, Senior Dev Writer, shared that the Yeoman generator for Office Add-ins will soon support creating SSO-enabled Office Add-ins.
For more information, visit https://developer.microsoft.com/office
This presentation was given by Mart Muller of Wizzix as part of the Sparked Toolkit Session: SharePoint Nightmares.
It discusses the problems that Mart has found when it comes to non-SharePoint deployment, and ofcourse, his solution to the challenges he faced.
Organizations of all sizes are begging their technical departments to setup SharePoint 2010 so that they're able to make use of some of the capabilities introduced within the SharePoint 2010 platform. While designing, implementing, configuring and deploying a system in and of itself has its own set of challenges, migrating into that shiny new SharePoint can be even more difficult.In this session, Scott and Dan will share some of their experiences and lessons learned tips, tricks and pointers for ensuring that you've considered the various aspects of challenges that arise during a migration effort. Further, as a bonus they'll share how to not fall prey to some of these pitfalls but rather be able to show that you're a well-rounded professional that's thought things through before pressing the enter key.
January’s call, hosted by Kim Brandl, featured the following presenters and topics:
-Alex Jerabek, Dev Writer, provided a general overview of Office Add-ins.
-Raymond Lu, Senior Program Manager, shared information about Excel preview (beta) APIs in requirement set 1.11.
-Vesa Juvonen, Principal Program Manager, presented about building Office Add-ins using the SharePoint Framework.
-Kim Brandl, Senior Dev Writer, shared that the Yeoman generator for Office Add-ins will soon support creating SSO-enabled Office Add-ins.
For more information, visit https://developer.microsoft.com/office
This presentation was given by Mart Muller of Wizzix as part of the Sparked Toolkit Session: SharePoint Nightmares.
It discusses the problems that Mart has found when it comes to non-SharePoint deployment, and ofcourse, his solution to the challenges he faced.
AD112 -- Development and Deployment of Lotus Product Documentation Wikisddrschiw
Come learn how the IBM Lotus product documentation team developed and deployed live production wikis using the Lotus Domino XPages template available from OpenNTF.org. We'll tell the story of how we learned XPages ourselves, developed the template to allow IBMers and customers to contribute to product documentation, and deployed XPages wiki applications into a Lotus Domino Web production environment with 300,000 visitors a month!
Last year at Lotusphere, XPages burst onto the Lotus Domino application development landscape. Since then, the developer community has embraced XPages and delivered compelling Lotus Domino Web solutions. 8.5.1 delivered on the vision by providing the ability to build an application once for the Web, the Notes client or expose as an iWidget.Come hear about other 8.5.1 enhancements, what is coming in 8.5.2 and glimpse towards the future.
Инструменты для разработчиков баз данныз (БД), клиент-серверных приложений, веб-приложений и сайтов, технических писателей.
((Платформы для разработки, IDE и бибилотеки, фреймворки, профайлеры и другие инструменты)
Upgrading to Team Foundation Server (TFS) 2012 – What You Need to Know! (07-2...Imaginet
Microsoft Visual Studio 2012 brings a number of new features into the integrated ALM toolset. With new features like PowerPoint Storyboarding, Integrated Code Review Features, Stakeholder Feedback, and a newly integrated Developer / Operations Workflow, you will quickly find many reasons to upgrade to Visual Studio and Team Foundation Server 2012! In this webinar, we’ll briefly discuss the breadth of new ALM features. Come join us for this free Webinar!
XPages Application Layout Control - TLCC March, 2014 WebinarHoward Greenberg
The Application Layout control may be the most useful and powerful tool available to an XPages developer. A well designed Application Layout can be used to provide a consistent design across all of your XPages applications and increase your XPages development productivity. This webinar will cover how to enable and design the Application Layout in a custom control to provide a consistent user interface. We will compare several application layout design strategies that can be used with the Application Layout control and use the Application Layout control with the Bootstrap4XPages project to create a responsive design for desktop, tablet and mobile devices.
Cross the boundaries with the upcoming XPages public API! You'll see how you can extend XPages by providing your own native controls, like a scrolling grid or outlines. You'll also see how to create your own data sources, secured REST services, simple actions, and IBM Lotus Sametime awareness rendering. See how you can increase your productivity -- and push your application to the highest standard.
XP teams try to keep systems fully integrated at all times, and shorten the feedback cycle to minutes and hours instead of weeks or months. The sooner you know, the sooner you can adapt.
Watch our record for the webinar "Continuous Integration" to explore how Azure DevOps helps us in achieving continuous feedback using continuous integration.
AD112 -- Development and Deployment of Lotus Product Documentation Wikisddrschiw
Come learn how the IBM Lotus product documentation team developed and deployed live production wikis using the Lotus Domino XPages template available from OpenNTF.org. We'll tell the story of how we learned XPages ourselves, developed the template to allow IBMers and customers to contribute to product documentation, and deployed XPages wiki applications into a Lotus Domino Web production environment with 300,000 visitors a month!
Last year at Lotusphere, XPages burst onto the Lotus Domino application development landscape. Since then, the developer community has embraced XPages and delivered compelling Lotus Domino Web solutions. 8.5.1 delivered on the vision by providing the ability to build an application once for the Web, the Notes client or expose as an iWidget.Come hear about other 8.5.1 enhancements, what is coming in 8.5.2 and glimpse towards the future.
Инструменты для разработчиков баз данныз (БД), клиент-серверных приложений, веб-приложений и сайтов, технических писателей.
((Платформы для разработки, IDE и бибилотеки, фреймворки, профайлеры и другие инструменты)
Upgrading to Team Foundation Server (TFS) 2012 – What You Need to Know! (07-2...Imaginet
Microsoft Visual Studio 2012 brings a number of new features into the integrated ALM toolset. With new features like PowerPoint Storyboarding, Integrated Code Review Features, Stakeholder Feedback, and a newly integrated Developer / Operations Workflow, you will quickly find many reasons to upgrade to Visual Studio and Team Foundation Server 2012! In this webinar, we’ll briefly discuss the breadth of new ALM features. Come join us for this free Webinar!
XPages Application Layout Control - TLCC March, 2014 WebinarHoward Greenberg
The Application Layout control may be the most useful and powerful tool available to an XPages developer. A well designed Application Layout can be used to provide a consistent design across all of your XPages applications and increase your XPages development productivity. This webinar will cover how to enable and design the Application Layout in a custom control to provide a consistent user interface. We will compare several application layout design strategies that can be used with the Application Layout control and use the Application Layout control with the Bootstrap4XPages project to create a responsive design for desktop, tablet and mobile devices.
Cross the boundaries with the upcoming XPages public API! You'll see how you can extend XPages by providing your own native controls, like a scrolling grid or outlines. You'll also see how to create your own data sources, secured REST services, simple actions, and IBM Lotus Sametime awareness rendering. See how you can increase your productivity -- and push your application to the highest standard.
XP teams try to keep systems fully integrated at all times, and shorten the feedback cycle to minutes and hours instead of weeks or months. The sooner you know, the sooner you can adapt.
Watch our record for the webinar "Continuous Integration" to explore how Azure DevOps helps us in achieving continuous feedback using continuous integration.
Ext JS Upgrade Adviser scans your Ext JS 4.x and Ext JS 5.x apps to identify and report problems in your source code that need to be addressed before upgrading to the latest Ext JS version.
Expert guidance on migrating from magento 1 to magento 2James Cowie
Migrating a Magento site is not just about code and data. Commerce platforms evolve over time and your Magento 1 solution is likely different today compared to the day you launched. Planning a successful migration means understanding what you have and where you are going before you can begin. In this session, architects from the Magento Expert Consulting Group will lay out best practices for defining your migration strategy, and share tips and techniques for code and data migration.
Topics of this presentation:
- Basics and best practices of developing single-page applications (SPA) and Web API Services on Microsoft .NET -
- Core with Docker and Linux.
- PowerShell Core automated builds.
- Markdown/PDF documentation.
- Documentation of public interfaces with Swagger/OAS/YAML.
- Automated testing of SPA on Protractor and testing the Web API on Postman/Newman.
This presentation by Sergii Fradkov (Consultant, Engineering), Andrii Zarharov (Lead Software Engineer, Consultant), Igor Magdich (Lead Test Engineer, Consultant) was delivered at GlobalLogic Kharkiv .NET TechTalk #1 on May 24, 2019.
Rational Developer for i (RDi) is the IDE of choice for editing, verifying, analyzing, and managing RPG, COBOL, and C/C++ on the IBM i (i.e the AS/400). If you come from a SEU/PDM development environment and are looking to move to a robust development environment, or if you wish to use the new RPG language features, you need to read through this to learn how to adopt the product.
In this presentation we cover the new features of RDi 9.1, including the new debugger and code coverage tooling. We also demonstrate editing features of the LPEX editor, such as find/replace with regular expressions. We cover the screen and report designers as well.
The Ext JS 6.7 Modern toolkit now supports grid filtering, grid locking, virtual scrolling for infinite grid, material chip, multiselect combobox and color picker.
ExtAngular includes the most complete set of professionally tested and commercially supported Angular components for developers to use in creating visually stunning, data-intensive applications on desktop and mobile devices.
Product Camp Silicon Valley 2018 - PM Technical SkillsSandeep Adwankar
You are excited to be PM and want to lead web or mobile engineering team? However, you are unsure about differences in React and React Native, what is JSX, Babel, ES2018, module manager, NPM registry, Gulp, Webpack, JWT and essentially why web security matters. This session will introduce and explain key terms so that you can have strong working relationship with engineers and bring the team onboard with your vision.
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.
AI Pilot Review: The World’s First Virtual Assistant Marketing SuiteGoogle
AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-pilot-review/
AI Pilot Review: Key Features
✅Deploy AI expert bots in Any Niche With Just A Click
✅With one keyword, generate complete funnels, websites, landing pages, and more.
✅More than 85 AI features are included in the AI pilot.
✅No setup or configuration; use your voice (like Siri) to do whatever you want.
✅You Can Use AI Pilot To Create your version of AI Pilot And Charge People For It…
✅ZERO Manual Work With AI Pilot. Never write, Design, Or Code Again.
✅ZERO Limits On Features Or Usages
✅Use Our AI-powered Traffic To Get Hundreds Of Customers
✅No Complicated Setup: Get Up And Running In 2 Minutes
✅99.99% Up-Time Guaranteed
✅30 Days Money-Back Guarantee
✅ZERO Upfront Cost
See My Other Reviews Article:
(1) TubeTrivia AI Review: https://sumonreview.com/tubetrivia-ai-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
Software Engineering, Software Consulting, Tech Lead.
Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Security,
Spring Transaction, Spring MVC,
Log4j, REST/SOAP WEB-SERVICES.
Cyaniclab : Software Development Agency Portfolio.pdfCyanic lab
CyanicLab, an offshore custom software development company based in Sweden,India, Finland, is your go-to partner for startup development and innovative web design solutions. Our expert team specializes in crafting cutting-edge software tailored to meet the unique needs of startups and established enterprises alike. From conceptualization to execution, we offer comprehensive services including web and mobile app development, UI/UX design, and ongoing software maintenance. Ready to elevate your business? Contact CyanicLab today and let us propel your vision to success with our top-notch IT solutions.
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.
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.
Unleash Unlimited Potential with One-Time Purchase
BoxLang is more than just a language; it's a community. By choosing a Visionary License, you're not just investing in your success, you're actively contributing to the ongoing development and support of BoxLang.
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Globus
The U.S. Geological Survey (USGS) has made substantial investments in meeting evolving scientific, technical, and policy driven demands on storing, managing, and delivering data. As these demands continue to grow in complexity and scale, the USGS must continue to explore innovative solutions to improve its management, curation, sharing, delivering, and preservation approaches for large-scale research data. Supporting these needs, the USGS has partnered with the University of Chicago-Globus to research and develop advanced repository components and workflows leveraging its current investment in Globus. The primary outcome of this partnership includes the development of a prototype enterprise repository, driven by USGS Data Release requirements, through exploration and implementation of the entire suite of the Globus platform offerings, including Globus Flow, Globus Auth, Globus Transfer, and Globus Search. This presentation will provide insights into this research partnership, introduce the unique requirements and challenges being addressed and provide relevant project progress.
Accelerate Enterprise Software Engineering with PlatformlessWSO2
Key takeaways:
Challenges of building platforms and the benefits of platformless.
Key principles of platformless, including API-first, cloud-native middleware, platform engineering, and developer experience.
How Choreo enables the platformless experience.
How key concepts like application architecture, domain-driven design, zero trust, and cell-based architecture are inherently a part of Choreo.
Demo of an end-to-end app built and deployed on Choreo.
May Marketo Masterclass, London MUG May 22 2024.pdfAdele Miller
Can't make Adobe Summit in Vegas? No sweat because the EMEA Marketo Engage Champions are coming to London to share their Summit sessions, insights and more!
This is a MUG with a twist you don't want to miss.
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?
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).
A Comprehensive Look at Generative AI in Retail App Testing.pdfkalichargn70th171
Traditional software testing methods are being challenged in retail, where customer expectations and technological advancements continually shape the landscape. Enter generative AI—a transformative subset of artificial intelligence technologies poised to revolutionize software testing.
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTier1 app
Even though at surface level ‘java.lang.OutOfMemoryError’ appears as one single error; underlyingly there are 9 types of OutOfMemoryError. Each type of OutOfMemoryError has different causes, diagnosis approaches and solutions. This session equips you with the knowledge, tools, and techniques needed to troubleshoot and conquer OutOfMemoryError in all its forms, ensuring smoother, more efficient Java applications.
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdfJay Das
With the advent of artificial intelligence or AI tools, project management processes are undergoing a transformative shift. By using tools like ChatGPT, and Bard organizations can empower their leaders and managers to plan, execute, and monitor projects more effectively.
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisGlobus
JASMIN is the UK’s high-performance data analysis platform for environmental science, operated by STFC on behalf of the UK Natural Environment Research Council (NERC). In addition to its role in hosting the CEDA Archive (NERC’s long-term repository for climate, atmospheric science & Earth observation data in the UK), JASMIN provides a collaborative platform to a community of around 2,000 scientists in the UK and beyond, providing nearly 400 environmental science projects with working space, compute resources and tools to facilitate their work. High-performance data transfer into and out of JASMIN has always been a key feature, with many scientists bringing model outputs from supercomputers elsewhere in the UK, to analyse against observational or other model data in the CEDA Archive. A growing number of JASMIN users are now realising the benefits of using the Globus service to provide reliable and efficient data movement and other tasks in this and other contexts. Further use cases involve long-distance (intercontinental) transfers to and from JASMIN, and collecting results from a mobile atmospheric radar system, pushing data to JASMIN via a lightweight Globus deployment. We provide details of how Globus fits into our current infrastructure, our experience of the recent migration to GCSv5.4, and of our interest in developing use of the wider ecosystem of Globus services for the benefit of our user community.
2. Sencha Tools
Brings enterprise grade system of tools to Ext JS framework. Provides
developers of different backgrounds (personas) with:
- Optimal developer use cases and workflow
- Benefits of productivity improvement, quicker time to market
- Robust features, roadmap and upgrade path
- Adopt Ext JS framework quickly and support in Ext JS ecosystem
2
Helps developers quickly build performant, best practices,
beautifully styled apps
6. Ext JS Stencils
• Drag and drop component symbols to
mockups faster
• Supports Components from Modern and
Classic toolkit
• A complete UI asset kit for
- Adobe Illustrator
- Sketch
- Omnigraffle
- Balsamiq
- SVG/PNG
6
7. Sencha Architect
• Drag-n-drop visual app builder
• Best practices code generator that
minimizes manual coding
• Integrates Cordova for hybrid apps
• Support for Themer; import custom
themes
8. Architect – Build Modern Apps in minutes
• Generate modern app with Data UI
Builder
• Generates grid, list, details, form,
controller, stores and mock data from
your data model
8Pro and Premium
9. Architect – Easily create hybrid mobile apps
Convenient menus to quickly create hybrid
mobile apps
• Add Cordova packager and update build
settings with native profiles
• Build iOS/Android apps
• Build and Emulate iOS/Android apps
9Pro and Premium
10. Architect –Import themes from Sencha Themer
• Easily import custom themes created
using Sencha Themer
• Architect copies theme package and
applies theme to app
10Pro and Premium
11. Architect – Best Practices Code Generation
• Best Practices Automated Code Generation
• Easy code refactoring
- Renaming class/function
- Moving class/function
- Promote item to class
- Transform xtype
Pro and Premium
12. Architect – Application Templates and Extensions
• Quick start with provided application
templates
• Save your project as a template
• Save custom components
• Build framework extensions
Pro and Premium
14. Sencha Architect 4.1 – What’s New
• Support for Ext JS 6.2.1 and Cmd 6.2.1
• Drag and drop Premium Components
- D3 , Calendar, Pivot grid, Exporter
• Better Grid Support
- Row widget, header resizer for Classic
- Row expander for Modern
- Grid Builder support in Modern
• Extend Controller and Models
• Asset Manager to manage frameworks
14
15. Architect 4.1 – D3 Adapter
Integrates the D3.js library with Ext JS
core and provides some of the most
commonly used D3 visualizations as ready
to use components in Ext JS.
- Integration with data stores to update the
visualizations as data changes
• Data Store for regular data
• Tree Store for hierarchical data
- Pan/zoom interactions
15
16. Architect 4.1 – Calendar Component
Provides all the building blocks needed to
include advanced calendaring capabilities
in Ext JS applications.
- Day, Week, & Month views
- Store to define events
- Time zone support
- Drag, Resize & Validation
- Google’s Calendar API integration
16
17. Architect 4.1 – Pivot Grid
Powerful data analysis capabilities
available in both Classic and Modern
Toolkit.
- Drag-and-drop configurator
- Plugins for drilldown, range editor, exporter,
etc.
- Different layouts and styling elements
- Optimized for touch-devices
17
18. Architect 4.1 – Data Exporter
Supports export for native XLSX format,
as well as many other common export
formats such as HTML, CSV, and TSV.
- Capability to configure the exports for visible
or invisible (hidden columns) data
- Column styling in the exported documents
- Available in both toolkits, for Grids and Pivot
Grid
18
19. Architect 4.1 – Grid Enhancements
Exciting new functionality such as ‘row
body widgets’ that will allow you to add
components to the row body, such as grid
inside a grid.
- Available for both toolkits
- Can be linked to parent grid record
- Can put any component within the row body,
not just grid inside a grid
19
20. Architect 4.1 – Manage Ext JS frameworks, Cmd
• Sencha Architect now has option to
manage frameworks where you can
choose to install or remove framework or
Sencha Cmd versions.
• You can find the Manage Frameworks
option in File tab in Preferences menu.
21. Architect 4.1 – Import and Export Configs
• Import configs – Paste config values and
apply to a class
• Export configs – Export config values to
clipboard that you can copy to other
projects
28. Code Generation - Create New Ext JS App
• Provides wizard to walk through creation
of new app
29. Integration with Sencha Cmd
• Watch app source code for changes
• Rebuild outputs
• Web Server is started and hosts app
• See compilation errors as they happen
30. Debugging Ext JS Apps
• Microsoft’s “Debugger for Chrome”
extension
• Launch Chrome browser with remote
debugging enabled
• Attach extension to the browser
• Start debugging F5
32. Sencha Inspector
• Inspect over nested components and
minimize to improve performance
• For classic toolkit, identify unnecessary
components in layout runs
• Identify issues with data binding
• Debug issues with proxy and stores
32
33. What is Sencha Inspector?
Inspection and debugging
tool built specifically for
Sencha Ext JS applications
34. Why Sencha Inspector?
• Browser based debugging tools work
with rendered DOM, JS, CSS, and
don’t understand Sencha architecture
• Ext JS apps need better debugging
tool to be more efficient and productive
Improve Developer Productivity
35. • Developer has run into issues and needs to debug the application
• Developer wants to review / improve the performance of their app
• Developer wants to watch and review events fired while interacting
with an application
Common Use Cases
Inspecting, Debugging
36. Inspecting Architecture
• Detailed overview of application
architecture for any Ext JS app
• MVC, MVVM architecture details of
Model, View, Controller, ViewModel
Capabilities Overview: Inspection
37. Inspecting Events
• List of all events fired by Ext JS
components and appropriate event
handlers
• Events captured by name, source,
xtype, etc.
Capabilities Overview: Inspection
38. Inspecting Over-Nested Layouts
• Identifies components that are
nested within multiple containers
• Detects over nested containers and
shows prominently
• Helps minimize over nesting to
improve performance
Capabilities Overview: Inspection
39. Debugging Data Bindings
• Identifies issues related to data
binding, which even IDEs cannot
catch
• Displays data binding issues in red
to notify developers
Capabilities Overview: Debugging
40. Debugging Store & Proxies
• Identifies issues with views that are
not able to display data from a
server proxy.
• Shows Model, Store and Proxy
properties for developer to debug.
Capabilities Overview: Debugging
41. Improving App Performance
• Identifies components that
appear in any layout runs
• Points developer to eliminate
things that can reduce
unnecessary layouts of the
components, to improve
performance
Capabilities Overview: Debugging
43. Sencha Themer
• Design themes in an interactive visual
environment – no code
• Quick configurations for global variables
that cascade across all components
• Support for component Uis
• Live updates – No compile, build, reload
• Package themes, and share with ease
43
44. Classic Toolkit Modern Toolkit
base
neutral
classic
gray
neptune
crisp
crisp-touch
neptune-touch
triton
base
neptune
triton
ios
material
Create custom theme starting from Ext JS theme
46. Theme with innovative color selectors
• Color Palette showing base, background
and text color with 5% lighter and darker
• Material Design based Color Palette
46
47. Get comprehensive view of all updated styles
• View all Sass variables that you can
style
• As you style your app, filter view to see
updated Sass variables and their values
47
48. Easy way to add web fonts
• Add Google font URL to use web font in
your app
• Apply the web font to any component
48
49. Manage “Big” mode for modern apps
• Themer creates “Big Mode” variables to
be more touch-friendly
- In Phone view
- Inspecting an app in “Big” mode
49
50. What New in Themer 1.1
• Support for UIs for components such as
grid, list, tabpanel, title bar, form
components (text, datepicker), and more
• Connect your app to Themer and
Inspect app
• Modify component styles and UI in
Inspect mode
50
51. Themer 1.1 – Supports Extensive Component UIs
• Support for modern grid, list, tabpanel,
title bar, form components and more
• Full access to all Sass variables for “UI”
configuration.
51
52. Column Header
Check Column Header
Group
Header
Row
Check
Cell
Expander
Cell
Paging
Toolbar
Text
Cell
Row Numberer
Cell
Number
Cell
Widget
Cell
Date
Cell
Theming Modern Grid
53. Themer 1.1 – Theme Modern Grids and Make Them
Unique
• Modern Grid consists of grid cells, rows,
columns, column header, paging toolbar
and more
• With Themer, each of these
subcomponents can be uniquely themed
• Just add “ui” config for the specific
subcomponent in the grid and then
theme the UI with Themer.
53
54. Themer 1.1 – Easily Connect app to Themer
• Directly connect your app to Themer
• Update app.json and view connected
apps from View -> Connected Apps
54
55. Themer 1.1 – Directly Theme your app
• Inspect mode provides fine-grained
control over style selection in Your App
• Modify Sass variables and see changes
live
• Inspect mode allows freezing and
locking state of all components in
preview app
• Easy way to theme component states
such as – hover, pressed, open
55
56. Themer 1.1 – Inspect and Style with Component Tree
• In “Inspect” mode, click on the app and
view component tree
• View and them selected component’s
styles and UIs
56
57. Themer 1.1 – Import Colors from CSS
• Import colors from existing css files and
add to color palette
• Color palette will show imported colors
with lighter and darker options in
increments of +/- 5%.
57
58. Architect 4.1.2 – New release to support Themer 1.1
• Import themes with UIs created using
Sencha Themer
• Architect copies theme package and
applies theme to app
58Pro and Premium
59. Sencha Themer – Theming Contest
• Download Themer 1.1 & our contest
App
sencha.com/sencha-theming-contest-2016/
• Theme App and send us your theme at
contest@sencha.com
59
Winning Prize $2500
65. Ext JS 6.5
• Rich feature set – in Modern toolkit
• Desktop look-n-feel and related behavior
• Leverage the browser advancements – features + performance
• Common codebase for Ext JS, React (and Angular)
• Preparing for modern language features and tooling
Take a look what’s new in Sencha Tools, and what’s on the on the horizon for Tools. We will demonstrate the innovations in Sencha Cmd, Architect, Themer, and our new plugin for Visual Studio Code. We will also discuss the Ext Electron Package for native desktop packaging, and what we have planned for adopting the modern and open web tooling based on NodeJS, NPM and Webpack.
Integrate with enterprise development environments to provide a seamless development experience for building applications with Sencha SDK
Improve developer productivity, development experience and minimize errors during development.
Points
1. Mockup faster and better
This shows how code completion will work for Properties, xtypes, keys in configs as well as events.
For instance, if you were to start typing “xtype: ” and on control space, you would be presented with a list of all available xtypes. As you continue typing, the suggestion list will filter until you arrive at the xtype you seek. At which point, you can simply select the item.
This functionality enables users to quickly move throughout their application without the need for searching a tree or directory structure.
With the Sencha Visual Studio Plugin installed, you can right-click (or use the standard F12 shortcut key) on any of the following and select “Go to Definition” to view an item’s definition.
This functionality enables users to quickly move throughout their application without the need for searching a tree or directory structure.
With the Sencha Visual Studio Plugin installed, you can right-click (or use the standard F12 shortcut key) on any of the following and select “Go to Definition” to view an item’s definition.
You can create a basic project type containing an example of a Web API project configured to use Ext JS through the ‘New Project’ action.
Upon selecting it, the App Generation wizard will appear as you can see. It will be populated with Sencha Cmd location, ExtJS SDK location, theme and toolkit. You can change it as well. This will generate example application.
This is an ASP.NET application utilizing Web API (for Web Services, for example), with an Ext JS application baked in the Sencha directory. You can click the ‘Run’ button (or press Control + F5) to launch the system web browser with the application hosted by IISExpress.
Once an Application has been generated, you can easily start Sencha App Watch to begin development with the Sencha’s Cmd web server based on Jetty web server.
To start/stop Sencha Cmd’s ‘app watch’ command at any time, simply right click on the root Ext JS application folder to display the context menu and select ‘Run Sencha App Watch’.
One Cmd has started, you will see Sencha Cmd’s output in the console view and your application will be available at location provided
Stop the process at any time by right clicking the Ext JS application root again and selecting ‘Stop Sencha App Watch’.
Once an Application has been generated, you can easily start Sencha App Watch to begin development with the Sencha’s Cmd web server based on Jetty web server.
To start/stop Sencha Cmd’s ‘app watch’ command at any time, simply right click on the root Ext JS application folder to display the context menu and select ‘Run Sencha App Watch’.
One Cmd has started, you will see Sencha Cmd’s output in the console view and your application will be available at location provided
Stop the process at any time by right clicking the Ext JS application root again and selecting ‘Stop Sencha App Watch’.
Points
Sencha Inspector detects over nested containers and shows prominently to the developer to correct it.
Layout runs means recalculating layouts which needs to be efficient. Lesser the number of components involved in layout runs, more efficient it is
Sencha Inspector will analyze the data bindings on selected components, and highlight keys whose bound values are not found.
Sencha Inspector can debug issues with a view that is not able to display data from server proxy
Today’s web developers are well versed on using developer tools that come with the browser. There is Chrome developer tools that come with chrome browser. There are similar tools for Safari and IE browsers. These tools work by exposing HTML, CSS, Javascript that is underneath these web pages.
However, that is not sufficient for needs of ExtJS developers. The Ext JS is object oriented and class based framework and developer tools that come with browser are not able to show these classes. These classes include hundreds of components, view model, view controller, events and even themes.
Sencha Inspector is that tool that shows Ext JS in direct form as class structure and at abstraction that is at higher level that what chrome developer tools capable of
The business case of Inspector is cost savings. If Inspector can help save developer’s time, that will result in cost savings and that justifies incentive for someone to move to Premium and get Inspector.
The key developer use cases are Inspecting, debugging and theming
Quicker to understand application that some one else has written
Map visually web app with application structure
Easier to debug issues in the application
Easier to try out different Saas variables and themes
There are few use cases here
Developer wants to understand and review application architecture of a complex application to find issues
New developer wants to learn about application
Architect wants to review application architecture
There is app architecture tab that lists all the classes of the app that are currently loaded. The classes are organized in folders the same way as they would in the file system.
Ext JS provides support for MVC and MVVM application architectures.
In MVC, user interacts with view, displays data in Model and interactions are monitored by controller that updates view or model.
In MVVM has view Model that coordinates changes between Model’s data and view’s presentation using data binding
The components and classes of Ext JS fire a broad range of events at various points in their lifecycle. As you interact with app, there are number of events that are generated by the app. Inspecting Events lets you look at Events, fire some events, and determine handler for events
One of the common issue that we found with ExtJS application is overnesting. This is when developer creates components that are within a container nested within a container.
With number of such overnesting instances, the application has performance issues.
Sencha Inspector detects over nested containers and shows prominently to the developer to correct it.
Show over-nesting issue in feedviewer app
Data binding is important concept with ExtJS that allows you do more with less code. Essentially you bind you component and as data changes, your component updates.
However with this increased power, you have more chance to make mistakes.
Developer creates a data binding, but has a typo in the bind expression. The IDE is not able to detect the typo and developer is frustrated because of not getting desired result.
Sencha Inspector will analyze the data bindings on selected components, and highlight keys whose bound values are not found. In the example above, you may notice that “feeed” is misspelled -- a simple error that might be very difficult to notice in a large codebase.
Developer is having issues with a view that is not able to display data from server proxy. Sencha Inspector shows Model, Store and Proxy properties and developer is able to debug issue with the proxy. We can now explore the store’s basic configuration, model, and proxy information. In the lower-left grid, you can choose a record and then explore its raw data in the lower-right grid.
Add RSS feed and show it updated on store
One of key issue is that Developer is having performance issues with the application. With Sencha Inspector, developer is able to see components that appear in layout runs.
In Ext JS, the page and component layouts are managed by the framework using JavaScript. Anytime a component is added, removed, or resized the framework needs to recalculate layouts – so the obvious implication is that performance problems might occur if the framework needs to spend long CPU cycles recalculating the sizes and positions of components.
Opening up a layout run, we can see exactly what components are affected. We can even select one (that has an xtype) and click “Reveal” to find more information about this component in the tree.