Transcription
An overview of theEpicor KineticFramework
Introduction &History2
“ Past history hasn’t always beenso easy to make choices.” What do we use to build both web and mobile applications? Do we use open-source components vs. licensed components? What frameworks are going to stand the test of time? Which languages align with our direction and skillsets?Technologies?Components?ks ?roewFramLanguages?3
Framework HistoryKinetic Framework 2.xMix of Technologies / ApproachesUse of many various technologies and approachestrying to solve browser & mobile applicationswithin Epicor.Kinetic Framework 4.x2ndgeneration UI framework on Angular 5,Kendo UI components, and TypeScript.prior4th generation UI framework that supportsextensibility, modules, customizations,and personalizations.2.x 20154.x2018201620191.xEpicor Mobile Framework (EMF)1st2020generation UI framework on HTML,Angular 1, Bootstrap, JavaScript, and Opensource UI components, and a Hybrid strategyfor mobile.3.xKinetic Framework 3.x3rd generation UI framework thatsupported the first formal Kineticdesign from PDX.
What is Kinetic?Design SystemUI FrameworkCross-Platform FrameworkA system that defines how thetypography, colors, layouts, and UIcomponents behave. It incorporatesthe Epicor brand.The UI framework is used bydevelopers to build applications.The framework adheres to theKinetic Design system out of the box.Standard UI framework for building applicationsacross all platforms within c.5
Technically, how does it work?Industry TechnologiesDeployed to NPMBrowser, Hybrid & Mobile AppsKinetic uses industry standardtechnologies, frameworks, and UIcomponents.The Kinetic framework is versioned,compiled, and deployed to our EpicorNPM artifacts for consumption.Kinetic applications can be deployed asbrowsers apps, desktop apps, or mobile apps.Browser ApplicationsKendo UIAuto Updated / Desktop ApplicationsStore Downloaded / Mobile Applications6
Kinetic is integrating to everything!We are seeing more and more Kinetic applications that are integrating to everything fromgeolocation and camera access, high-speed scanners and card scanners, printers and healthand monitoring APIs, to machine learning and AI.
Kinetic ApplicationTypesThere are several types of Kineticapplications that are being createdwithin Epicor. Adopting Kinetic, to itsfullest capabilities, depends on theKinetic StandardApplication(hand coded)platform's technology position.Kinetic InspiredApplication(CSS Styled)App StudioApplication( metadata driven)8
The Kinetic TeamKinetic Product Design Team (PDX)Kinetic Framework TeamKinetic Mobile DevOps TeamDirector / PO – Chris McCurryDirector / PO – Brian ConnerOwner - Ragam RamachandranThis team is responsible for all aspects of the Kinetic designinside of the framework. Fonts, colors, and layout patterns.This team is responsible for the engineering anddelivery of the Kinetic Core framework ,and Kinetic AppThis team is responsible for helping engineering teamscreate CI/CD pipelines for their products. This teamThis team implements the Epicor brand for the framework.Studio.has expertise in preparing applications for delivery tothe Apple and Android app stores.9
Our ServicesPlatform Apps OnboardingDesign & Framework ConsultingBest Practice RecommendationsThe Kinetic team will help your team get up toThe Kinetic team can consult with your team onThe Kinetic team can recommend best practicesspeed on the framework so they can start buildingapplications quickly.design ideas for your applications and help yourdevelopers utilize the framework featuresdepending on the requirements of yourapplication.properly from the beginning.Feature Planning SupportCode ReviewsDeveloper HelpThe Kinetic team can help you plan new featuresThe Kinetic team can help provide code reviewsThe Kinetic team provides help to get defects fixedin Kinetic that your application depends on. Wewill work with your team to ensure properfor your team to ensure things are beingdeveloped appropriately to standards for solvingand enhancements submitted and prioritized forthe Kinetic releases.delivery of the features to meet your deadlines.your requirements.10
Features &Capabilities11
Framework Core ElementsDesignSystemApplicationShellProvides standards onfonts, colors, terminology,layouts, and moreThe core application shellprovides authentication,routing, home page, slideout panels, menus, etc.ComponentLibraryThe core UI componentsthat are used to build outthe user interfacesPlugin LayerA standard way to create alayer to extend Kineticframework for specificplatform requirementsApplicationStudioEpicor’s designer used forbuilding web and mobileapplications withcustomizations andpersonalizations12
Kinetic Framework LayersKinetic Application Studio43Provides tooling for building new applicationsand customizing and personalizing existingapplications.App Studio Application( metadata driven)Kinetic Plugin LayerFramework override layer that provides platformspecific behaviors and extensibility.Kinetic Core FrameworkKinetic Standard Application(hand coded)Core framework that Epicor developers use forbuilding applications.21Kinetic Design SystemThe core system that provides Epicor branding,typography, icons, colors, layouts, and UI behaviors.Kinetic Inspired Application(CSS Styled)
What do you get out of the box?01Responsive ShellKinetic provides a responsiveshell that contains left and rightsidebars, navigation patterns, and02is responsive across form factors.Menu Bar / PanelsKinetic provides a menu bar onthe left side of the shell thatprovides a standard menu,03favorites, recents, help &support, user preferences,0407Kinetic provides a strong set of UIcomponents that are built on thefoundation of the Telerik Kendo UI05configured REST services that cantalk to your backend system forcomponents.access to business logic and data.Mobile ComponentsKinetic Angular ServicesThere are several mobilecomponents that provide featureslike geolocation, camera andphotos, barcode scanning, mediaaccess, and more.IdP, and Custom.REST ServicesKinetic provides automatically08Kinetic provides a large set ofutility services includinginternationalization, localization,telemetry, and more.Kinetic provides a login thatsupports many differentauthentication methods includingEpicor Token v1, Azure AD, Epicornotifications, and more.UI Component SuiteLogin & SessionManagement06DataViews & DataBindingKinetic provides DataViews andBinding to allow your applicationto interact with your data.09Developer StandardsKinetic provides developerstandards on how to buildapplications, implement codingstandards, and provides aframework for builds anddeployments.
The Kinetic ShellThe Kinetic Shell provides the core foundation forany applications built with the Kinetic framework.UI Alignment across EpicorThe Kinetic shell provides a standard inaligning all applications within Epicorto the Kinetic Design system.Application FrameworkThe Kinetic shell provides manyfeatures out of the box like the menubar, favorites, sliding panels (left / right)and a responsive design that scales tomobile.Standard Home PageThe home page offers a flexible, gridbased layout, for placing UIcomponents that represent importantinformation for your users.
Mobile FeaturesKinetic works with Cordova for native mobile featuresAlthough Kinetic is a web-based architecture based on HTML5, CSS, and Angular it also canbe used with Cordova plugins for native hardware access on both iOS and Android devices.Native Hardware AccessSingle CodebaseMany Mobile PluginsKinetic applications can accessKinetic are a single code baseCordova has many plugins fornative hardware functionalitythrough Cordova plugins.that can be run in the browserand on mobile devices. Harnessmobile application development.This can help advance the mobileyour web developers' skillsets formobile!capabilities of your application.
Release Cadence &Upgrades17
Kinetic Version Policy Kinetic follows Semantic Versioning policies All versions can be found on our NPM feed - http://epicornpm:4873/ MAJOR.MINOR.PATCH (x.x.x) MAJOR version when you make incompatible changes to the framework. MINOR version when you add functionality in a backwards-compatible manner. PATCH version when you make backwards-compatible bug fixes.18
Kinetic Release CadencePrevious VersionsCurrent VersionCritical Bugs - Every 2 weeksCritical Bugs – Every 2 weeksEnhancements – Every 2 weeksWe encourage everyone to try to stay on the latest minor version of a release 19
Upgrade ProcedureRollback CapableIf your team finds that a newer versionhas some issue for your application,you can easily just rollback to theprevious version and work with theKinetic team to figure out a pathforward.On-demandUpgradesAt anytime you can upgrade yourKinetic application to a newer versionand test it out.We recommend reading thoroughlythrough the release notes and followany upgrade procedures.20
Documentation &Training21
Kinetic Training Resources0102030405Angular SDKDocumentationKinetic TrainingStreamsKinetic DesignSystemKinetic SDKDocumentation& ShowcaseKineticKnowledgebaseSDK DocumentationKinetic ShowcaseAngular DocsTraining StreamsDesign System DocumentationKnowledgebaseLearn AngularLearn KineticUnderstand Kinetic DesignUnderstand ComponentsGet AnswersLearning Angular is the first step toUse these videos to becomeLearn how the design systemLearn about the many differentSearch the knowledgebase forbe successful with Kineticfamiliar with the Kineticimpacts how the frameworkUI components and servicesanswers on things otherarchitecture and applicationmanifests itselfoffered by the frameworkdevelopers have already run intoconcepts22
Developer Help23
Knowledge BaseSearch for answers in our knowledgebasefrom working with other developers.Yammer ChannelGet help by posting questions to our liveYammer channel to get live interactionfrom the Kinetic team.Kinetic RequestsSubmit a request for defects and featureenhancements to the Kinetic triage team.Global HelpMany choices to get help!Developers have a few different choices when it comes getting support from the Kineticteam. Each channel offers a different level of support.
building web and mobile applications with customizations and personalizations. Kinetic Framework Layers Core framework that Epicor developers use for building applications. Kinetic Core Framework The core system that provides Epicor brandi
