KEYSTONE JS FOR DRUPAL DEVELOPERS

Transcription

1 NYC CAMP KEYSTONE JS FOR DRUPAL JULY 18, 2016

2 ABOUT US Founded Employees 10 YEARS Average Experience Offices in: NEW YORK, NY (HQ) BOSTON, MA PHILADELPHIA, PA 80 % Of our clients come back to NorthPoint Digital with new engagements after initial project delivery 2

3 OUR SERVICES / Customer Research / Platform Strategy / Implementation / Architecture / Solution Design / E-commerce / 3rd Party Integrations / Analytics / Search / Mobile Development / Digital Strategy / Experience Strategy / Content Strategy / Mobile Strategy / User Experience + Design / Information Architecture / User Testing / Creative / Personal Development / Responsive Design 3

4 OUR CLIENTS Our work in the Media and Publishing Industries has enabled us to work with an amazing cross section of clients across a number of verticals including; Life Sciences, Health Care, Financial Services, Education and Not-for-Profit. 4

5 TECHNOLOGY PARTNERS & EXPERTISE Through preferred partnerships and deep expertise we ensure that our clients have the right component-based architectures that provide the flexibility and extendibility required to meet their current and ongoing needs. 5

6 ABOUT ME

7 MY BACKGROUND / Learned PHP and MySQL from the guy who wrote the book on CMS (literally) / Drupal developer, module maintainer since 2007 / Currently full-time Drupal project manager / Younger brother loves football and works at a sports analytics company (more on this later) 7

8 MY CHALLENGES / Decided to make an NFL draft site for my brother in a new CMS platform / when I know it would take me a day to build in Drupal / when all I want to use is Drupal / Had to learn Node.js, MongoDB, Mongoose, Express, Bootstrap and football / in 2 months / in my spare time 8

9 WHY LEARN KEYSTONE JS WHEN YOU ALREADY KNOW DRUPAL?

10 WHY LEARN KEYSTONE JS? / Enterprise Drupal 8 is a long way away (1-2 years) / Broad CMS concepts provide an easy point of entry / Challenge yourself / If you learned Drupal, you can pretty much learn anything / Work outside your comfort zone / Skills are transferable to Drupal 8 / Proudly Found Elsewhere ethos will mean Drupal could leverage Node.js (and in some cases, already does) / Node.js is a solid technology that enterprise-level companies are already adopting 10

11 WHY KEYSTONE JS AND NOT ANOTHER NODE.JS CMS? / Robust features but not prescriptive / Growing (and active) user community / Based in multiple technologies that are worth learning / Good documentation / Also worth considering: / Apostrophe 2 (original version was written in Symfony!) / PencilBlue / Ghost 11

12 ABOUT KEYSTONE JS

13 POWERFUL CMS FRAMEWORK BUILT ON + NODE.JS + EXPRESS + MONGO DB + MONGOOSE

14 SO WHAT ARE THOSE THINGS?

15 NODE.JS / Lightning fast server side JavaScript built on Chrome's JavaScript runtime / Built-in web server / Pluggable functionality through modules (using require and exports) / Package management through NPM / package.json file to manage dependencies on projects / Single thread processing (non-blocking vs blocking operations) / Learn more: / The Node Beginner Book by Manuel Kiessling 15

16 EXPRESS / Web application framework for Node.js / Easy routing that simply twins a path with a callback / Introduces middleware concept / A function that is passed the request and response objects / Injects controller logic for every page prior to routing / Choose your own template engine 16

17 MONGO DB / Non-relational / No joins, no schema / Documents vs rows, collections vs tables / All stored in BSON (Binary JSON) 17

18 MONGOOSE / Robust object data module for MongoDB/Node.js / Allows MongoDB to act as an invisible storage layer for object data / Get familiar with Mongoose early on as it provides KeystoneJS with: / The basic structure of models / The primary query methods / CRUD operations / scotch.io/tutorials/using-mongoosejs-in-node-js-and-mongodb-applications 18

19 DRUPAL VS KEYSTONE JS

20 CONTENT TYPE VS LISTS / Lists are defined in code / Collectively they form the MVC model / Found in the /model directory / Built from a fixed set of field types, very similar to Drupal / Dependencies, relationships, drag and drop sorting, on-save events built-in / Keystone provides a very strong admin front end to manage whatever is defined in the model 20

21 21

22 22

23 FIELDS VS FIELDS / Robust number of field types comparable to Drupal s field types / Select fields, text, WYSIWYG, numbers, URL, media fields for various cloud storage services / Current no multi-value fields without custom tweaking or underlying relationships / Relationship fields similar to Entity/Node Reference / Back references / Sorting on back references 23

24 MODULES VS MODULES / No pre-built plugins, but any node modules can added to the dependencies of the project / Modules export functions or objects which may include methods and/or properties / Most public modules are available and documented at npmjs.com / Custom modules can be added inside the project if needed 24

25 PATHS VS ROUTES / Routes act like menu callback paths as you would define in hook_menu() / Arguments are supported in a similar fashion to Drupal / Uses the Express routing format 25

26 MENU VS NAVIGATION / KeystoneJS supports placing views on simple top-level navigation / Officially KeystoneJS lacks a true content-driven menu system / Navigation trees have been developed where you define parent routes and then child routes are calculated based on content / Example with updates: github.com/keystonejs/keystone/issues/428 26

27 USERS VS USERS / Users are a list just like other content, similar to how users are entities in Drupal / KeystoneJS provides a loose starting point for roles and role management / Permissions are purely code-based (if gates for specific functionality) rather than configurable 27

28 UPDATE.PHP VS UPDATES / Update scripts run before the web server starts up / Update scripts are located in a dedicated directory and numbered sequentially (similar to Drupal) / Update scripts can make adjustments to the database, create content, etc. 28

29 SITE CONFIGURATION VS DOT ENV / Environment variable is loaded from a.env file via the Dot Env Node Module / The file is ignored by git so that configuration is hidden and may vary by environment / Heroku actually includes command line tools to set these variables 29

30 VIEWS VS VIEWS / Views are routes that map to a series of queries with a template-driven front end (sound familiar?) / No front end to build Keystone views, but just as well / Bad News: harder to set up / Good News: WAY more efficient 30

31 31

32 32

33 PHP TEMPLATE VS HANDLEBARS or Jade, or Swig, or Nunjucks / KeystoneJS takes advantage of the Express's template engine flexibility / Most templates allow for limited logic on template / Each language has varying levels of abstraction / Used Handlebars as it was the least abstracted / Handlebars even allows for Template.php-like gap fit functions 33

34 DRAFT IN DEPTH

35 PROJECT ANATOMY / Model consists of 10+ lists / All views custom (some based on examples) / Designed in Bootstrap with Handlebars for templates / design mocked up in HTML/CSS using Bootstrap / turned mockups into templates by simply replacing dummy content with handlebars 35

36 HOSTING / Hosted on Heroku / free tier for low traffic sites and reasonable pricing after that / using Forever to ensure uptime / code-only containers managed through git and command line tools / Pairs nicely with / MongoLab (for db hosting, also on free tier) / Cloudinary (for image and file hosting, also on free tier) 36

37 DRAFTINDEPTH.COM

38 THANK YOU New York Office 1540 Broadway New York, NY Tel: Boston Office! 470 Atlantic Avenue Boston, MA Tel: Philadelphia Office 1650 Market Street Philadelphia, PA Tel: / 38