Extending JS WU2016 Toronto

93 vues

Publié le

Overview

React, Angular, TypeScript… Over the past few years, all these names took part in a fashionable phenomenon, pushed by the big names of the web industry. But what if a parallel world exists beyond this marketed mirror? A better world where you can easily build flexible applications with reusable components.

Objective

Bourre will explain the right philosophy for building flexible applications with reusable components. As well, he will showcase the right tools to better achieve this goal with the dark side of the force.

Target Audience

Every developer who wants to share some inspiration about code design and push forward the limits of the JS eco-system.

Assumed Audience Knowledge

Devs that have already dealt with long life-cycle scalability and maintainability.

Five Things Audience Members Will Learn

Build modular and cross-platform applications
Create configurable architectures driven by DSL
Separate configurability from reusability
Design by contract with dependency injection
Use Haxe metaprogramming to boost code performances

Publié dans : Ingénierie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
93
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Extending JS WU2016 Toronto

  1. 1. far away from the flock Extending JS
  2. 2. Context importance Use the right TOOL for the right THING
  3. 3. Find the context Define the TARGET List your NEEDS Which kind of application? Which kind of tools?
  4. 4. Tailor-made solution keep the LEAD and properly answers to your NEEDS
  5. 5. Define the target
  6. 6. Define the target long lifecycle
  7. 7. Define the target long lifecycle scalable/configurable
  8. 8. Define the target long lifecycle scalable/configurable cross-platform
  9. 9. List our needs (toys)
  10. 10. universal code List our needs (toys)
  11. 11. universal code high performance List our needs (toys)
  12. 12. universal code high performance errors at compile-time List our needs (toys)
  13. 13. universal code high performance errors at compile-time smart tools chain List our needs (toys)
  14. 14. in the web apps jungle pixLib adventures @2003
  15. 15. pixLib adventures “Let’s grab knowledge from other Tech eco-systems” in the web apps jungles @tweenpix.net 2003
  16. 16. 2015 ... Six Feet Under
  17. 17. How can I target the browser now? with a statically typed language
  18. 18. No interface @compile time @2012
  19. 19. with extra benefits @2004
  20. 20. what is ? ● free and open source toolkit
  21. 21. ● free and open source toolkit ● statically typed programming language what is ?
  22. 22. ● free and open source toolkit ● statically typed programming language ● cross compiler for 10 targets (C++, JS, PHP, Java, Python, Lua…) what is ?
  23. 23. ● free and open source toolkit ● statically typed programming language ● cross compiler for 10 targets (C++, JS, PHP, Java, Python, Lua…) ● inlining, DCE, code optimization, meta-programming... what is ?
  24. 24. DCE with
  25. 25. So, we went for Haxe and developed
  26. 26. hexMachina So, we went for Haxe and developed
  27. 27. The golden trilogy ★ secure collaboration ★ code reusability ★ low coupling
  28. 28. Secure collaboration design roles with contracts
  29. 29. Interfacedefine contracts @compile time
  30. 30. modular system with configurable components Code reusability
  31. 31. Code reusability every module is a micro-application Hi dude! I’m a module.
  32. 32. Code reusability each module belongs to an unique domain My domain is “red”.
  33. 33. Code reusability any MODULE can be added at anytime Guess what, mine is “green”.
  34. 34. Code reusability every MODULE is configurable... I was scaled. What happened to you dude?
  35. 35. Code reusability Use composition to make new modules I’m ready for v2.0 now… With more features. [Sigh…]
  36. 36. ★ Low coupling Use messaging
  37. 37. Use messaging Let’s bring some communication now message from “green” domain
  38. 38. Use messaging Let’s bring some communication now Am new here. How we can talk together?
  39. 39. Use messaging At anytime... Send a message. It will be adapted for me.
  40. 40. Use messaging … with polymorph event flow yellow Adapter adaptsmessages
  41. 41. MODULE micro-application Each module can have its own architecture Yup! I love that shit.
  42. 42. ★ Low coupling prefer runtime coupling - USE IoC Jimmy! Answer me!
  43. 43. " Don’t call us, we will call you " Hollywood principle
  44. 44. Dependency Injection
  45. 45. automatic injection with annotations
  46. 46. hexAnnotation Do dirty reflection job @compile time
  47. 47. hexAnnotation build reflection value objects ClassDescription instance
  48. 48. hexInject for fast performances @runtime { properties : [ { name: "photosService", type : hex_di_IGetPhotosService, injectionName : "", isOptional : false}, { name : "galleryModel", type : hex_di_IGalleryModel, injectionName : "", isOptional : false} ], constructorInjection : { args : []}, methods : [], postConstruct : [], preDestroy : [] }; ClassDescription instance Injection
  49. 49. Build configurable architecture use Domain Specific Language
  50. 50. IMPERATIVE and DECLARATIVE programming mixed together Use DSL with metaprogramming
  51. 51. hexIoC Injection with DSL
  52. 52. DSL PARSING/ASSEMBLING FLOW Xml Parser parses
  53. 53. DSL PARSING/ASSEMBLING FLOW Xml Parser Assembler parses translates
  54. 54. DSL PARSING/COMPILING FLOW Xml Parser Assembler CompileTime Factory parses translates generates
  55. 55. DSL PARSING/COMPILING FLOW Xml Parser Assembler CompileTime Factory parses translates Generated Code generates
  56. 56. DSL PARSING/RUNTIME FLOW Xml Parser Assembler Context Factory parses translates Runtime @pplication builds
  57. 57. DSL hello world
  58. 58. DSL hello world
  59. 59. DSL hello world
  60. 60. Type declaration String is default type
  61. 61. SERVICES mapping
  62. 62. Module constructor injection
  63. 63. After compilation JavaScript is generated
  64. 64. INCLUDE recursive files inclusion
  65. 65. INCLUDE isomorphic applications
  66. 66. Fail early, fail loudly DSL CHECKING @compile time
  67. 67. DSL CHECKING @compile time type not found
  68. 68. DSL CHECKING @compile time missing ID
  69. 69. DSL CHECKING @compile time file missing
  70. 70. DSL edition with
  71. 71. hexMachina What’s next?
  72. 72. Recursive composition context agregates contexts, that agregates contexts, that...
  73. 73. Contexts hierarchy hierarchy is handled by DSL
  74. 74. DSL visual editor
  75. 75. @francisbourre / kid forever member of @DoclerLabs

×